<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</title>
	<atom:link href="https://a-estudio.co/feed/" rel="self" type="application/rss+xml" />
	<link>https://a-estudio.co</link>
	<description>Diseño web estratégico y branding para marcas premium. Especialistas en hospitality, lujo y festivales. Trabajo online desde Madrid y Canarias.</description>
	<lastBuildDate>Mon, 19 Oct 2026 12:14:53 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.3</generator>

<image>
	<url>https://a-estudio.co/wp-content/uploads/2026/07/cropped-A-ESTUDIO-BY-AINHOA-VAZQUEZ--32x32.png</url>
	<title>A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</title>
	<link>https://a-estudio.co</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Cómo aparecer en ChatGPT y en los asistentes de IA: lo que depende de tu web</title>
		<link>https://a-estudio.co/como-aparecer-en-chatgpt/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Wed, 07 Oct 2026 17:11:05 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=30475</guid>

					<description><![CDATA[<p>Qué hace que ChatGPT y otros asistentes de IA nombren un negocio, qué depende del diseño y el desarrollo de tu web, el papel de la ficha de Google y diez comprobaciones.</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/como-aparecer-en-chatgpt/">Cómo aparecer en ChatGPT y en los asistentes de IA: lo que depende de tu web</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-30475">.elementor-30475 .elementor-element.elementor-element-ac2cd43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="30475" class="elementor elementor-30475" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-ac2cd43 e-con-full e-flex e-con e-parent" data-id="ac2cd43" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-3ecc4e0 elementor-widget elementor-widget-html" data-id="3ecc4e0" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · CÓMO APARECER EN CHATGPT Y EN LOS ASISTENTES DE IA
Widget HTML / Elementor Pro. Misma maqueta que /diseno-web-editorial/ (aeArt1).
URL: https://a-estudio.co/como-aparecer-en-chatgpt/
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-body section > h3{margin:34px 0 10px}

/* fix: el texto de la lista debe partir línea en móvil */
html body #aeArt1#aeArt1 .art-checks button{white-space:normal !important;height:auto !important}
/* tabla apilada en móvil */
@media (max-width:640px){
html body #aeArt1#aeArt1 .art-table{overflow:visible}
html body #aeArt1#aeArt1 .art-table table{min-width:0;display:block}
html body #aeArt1#aeArt1 .art-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body #aeArt1#aeArt1 .art-table :is(tbody,tr,td){display:block;width:auto}
html body #aeArt1#aeArt1 .art-table tbody th{display:block;width:auto;border-bottom:0;padding:20px 0 4px}
html body #aeArt1#aeArt1 .art-table td{border-bottom:0;padding:6px 0}
html body #aeArt1#aeArt1 .art-table td:last-child{padding:10px 12px 14px;margin-top:4px;border-bottom:1px solid var(--ln)}
html body #aeArt1#aeArt1 .art-table td::before{content:"Una persona";display:block;font:400 11px/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mu);margin-bottom:2px}
html body #aeArt1#aeArt1 .art-table td:last-child::before{content:"Un asistente"}
}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Google + IA</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Cómo aparecer en ChatGPT</span></span>
<span class="art-line"><span><em>y en los asistentes de IA:</em></span></span>
<span class="art-line"><span><em>lo que depende de tu web.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>Para que un negocio pueda aparecer en respuestas de IA, conviene que su información sea accesible, clara y verificable.</strong> Tu web es una fuente propia que puedes mejorar, junto con los casos y las referencias externas. ChatGPT, Gemini, Copilot y Perplexity pueden utilizar fuentes y mecanismos diferentes; una web bien preparada no garantiza una mención.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-08">Actualizado · 8 octubre 2026</time> · 9 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/portatil-a-estudio-flores.webp" width="1448" height="1086" loading="eager" decoding="async" alt="Una web de A-ESTUDIO abierta en un portátil, entre flores iluminadas">
</div>
<figcaption class="art-micro">
<span>A-ESTUDIO</span>
<span>Lo que un asistente sabe de ti empieza por lo que tu web dice con palabras.</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#como-decide">Cómo decide un asistente</a></li>
<li><a href="#que-necesita">Lo que necesita encontrar</a></li>
<li><a href="#diseno">Diseño y desarrollo</a></li>
<li><a href="#metodo">Lo que hemos visto</a></li>
<li><a href="#fuera">La ficha de Google y lo de fuera</a></li>
<li><a href="#medir">Cómo saber si funciona</a></li>
<li><a href="#revisar">10 comprobaciones</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>Cada vez más personas eligen proveedor preguntando a un asistente: «un estudio que diseñe la web de una clínica», «un dentista de confianza cerca de mí», «un hotel tranquilo frente al mar». La respuesta puede seleccionar proveedores y enlazar fuentes. El número de opciones y los criterios cambian según el sistema, la consulta y el contexto.</p>
<section id="como-decide" aria-labelledby="h-cd">
<span class="art-kicker art-micro">01</span>
<h2 id="h-cd">
<span class="art-line"><span>Cómo decide un asistente</span></span>
<span class="art-line"><span><em>a quién nombra.</em></span></span>
</h2>
<p data-rv>Un asistente puede combinar conocimiento aprendido durante su entrenamiento, contexto de la conversación y, cuando utiliza búsqueda, información recuperada de la web. Esas vías no funcionan igual ni consultan necesariamente las mismas fuentes.</p>
<p data-rv>Responder desde conocimiento aprendido no implica visitar páginas en ese momento. Cuando utiliza búsqueda, el sistema puede recuperar fuentes actuales. La claridad y las referencias comprobables facilitan interpretar la información, pero no conocemos una fórmula universal que determine qué negocio se recomienda.</p>
<p data-rv>Por eso <strong>cómo aparecer en ChatGPT</strong> se parece menos a una técnica nueva que a una vieja exigencia: explicarse bien, en un sitio que se pueda leer.</p>
</section>
<section id="que-necesita" aria-labelledby="h-qn">
<span class="art-kicker art-micro">02</span>
<h2 id="h-qn">
<span class="art-line"><span>Lo que un asistente</span></span>
<span class="art-line"><span><em>necesita encontrar sobre ti.</em></span></span>
</h2>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Qué eres, en una frase</h3><p>Tipo de negocio, especialidad y lugar, escritos al principio de la portada y de cada página importante. «Estudio de diseño web para clínicas y hospitality, en Madrid y Tenerife» se entiende. «Creamos experiencias» no.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>Para quién trabajas</h3><p>Explica los sectores y servicios que realmente atiendes. Crea una página propia cuando exista una necesidad diferenciada y contenido suficiente; evita multiplicar páginas que repiten la misma información.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Pruebas</h3><p>Casos con nombre, qué se hizo y enlace al resultado. Una persona responsable con nombre y trayectoria. Estas referencias permiten contrastar las afirmaciones; su peso depende del sistema y de la consulta.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">4</span><div><h3>Respuestas a preguntas reales</h3><p>Cuánto cuesta, cuánto tarda, cómo se trabaja, qué incluye. Escritas como las formula un cliente, porque así es como se las preguntan al asistente.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">5</span><div><h3>La misma información fuera de tu web</h3><p>Ficha de Google, directorios del sector, perfiles profesionales, menciones en medios. Mismo nombre, misma actividad, misma ciudad.</p></div></li>
</ol>
</section>
<section id="diseno" aria-labelledby="h-di">
<span class="art-kicker art-micro">03</span>
<h2 id="h-di">
<span class="art-line"><span>Por qué empieza</span></span>
<span class="art-line"><span><em>en el diseño y el desarrollo de la web.</em></span></span>
</h2>
<p data-rv>Todo lo anterior son decisiones de diseño y de desarrollo, aunque no lo parezcan. Una web puede ser preciosa y resultar muda para un asistente: titulares dentro de imágenes, texto escaso, una sola página para diez servicios, código que tarda en cargar. Y puede estar llena de texto correcto y no convencer a ninguna persona.</p>
<p data-rv>Un buen <strong>diseño web</strong> resuelve las dos lecturas a la vez.</p>
<div class="art-table" data-table role="region" aria-label="Qué entiende una persona y qué entiende un asistente de IA en cada decisión de diseño y desarrollo web" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Decisión</span></th>
<th scope="col">Lo que percibe una persona</th>
<th scope="col">Lo que entiende un asistente</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Jerarquía de titulares</th><td>Sabe dónde está y qué leer primero.</td><td>Identifica el tema de la página y de cada apartado.</td></tr>
<tr><th scope="row">Texto real, no en imágenes</th><td>Puede leerlo en cualquier pantalla.</td><td>El texto HTML facilita el acceso sin depender de interpretar una imagen.</td></tr>
<tr><th scope="row">Una página por servicio</th><td>Encuentra lo suyo sin buscar.</td><td>Asocia tu nombre con cada servicio concreto.</td></tr>
<tr><th scope="row">Respuesta directa al principio</th><td>Entiende la propuesta en diez segundos.</td><td>Tiene una frase clara que puede citar.</td></tr>
<tr><th scope="row">Código ligero y rápido</th><td>No espera.</td><td>Reduce barreras de acceso; conviene comprobar el rastreo y la respuesta del servidor.</td></tr>
<tr><th scope="row">Datos estructurados</th><td>No los ve.</td><td>Dispone de información estructurada cuando el sistema la utiliza; debe coincidir con el contenido visible.</td></tr>
</tbody>
</table>
</div>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/QUORA-CLINIC-1.jpg" width="1900" height="1040" loading="lazy" decoding="async" alt="Diseño web de Quora Clinic, proyecto de A-ESTUDIO: diseño y contenido al servicio de la confianza">
</div>
<figcaption class="art-micro">
<span>Quora Clinic</span>
<span>Diseño y texto trabajan para la misma lectura.</span>
</figcaption>
</figure>
<h3>Lo que se decide antes de escribir una línea</h3>
<p data-rv>La estructura de páginas, los titulares y el orden de la información se fijan en el diseño. Añadirlos después, sobre una web pensada solo para verse bien, casi siempre obliga a rehacerla. Por eso en A-ESTUDIO la preparación para buscadores y asistentes forma parte del proyecto desde el primer boceto.</p>
</section>
</article>
</div>
<section class="art-case" id="metodo" aria-labelledby="h-case">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">04 · La experiencia</span>
<h2 id="h-case">
<span class="art-line"><span>Lo que hemos visto</span></span>
<span class="art-line"><span><em>en A-ESTUDIO.</em></span></span>
</h2>
<p data-rv>En las últimas semanas, varios potenciales clientes nos han contado que encontraron A-ESTUDIO a través de ChatGPT o Gemini. Parte de esos contactos llegó por teléfono o WhatsApp, y al menos uno se convirtió en una contratación de joyería. Es información declarada por los clientes: confirma un recorrido comercial, pero no permite atribuir la recomendación a una página o a un cambio técnico concreto.</p>
<dl class="art-facts" data-rv>
<div><dt class="art-micro">Estudio</dt><dd>A-ESTUDIO</dd></div>
<div><dt class="art-micro">Sectores</dt><dd>Clínicas, hospitality y marcas de alto valor</dd></div>
<div><dt class="art-micro">Sedes</dt><dd>Madrid · Tenerife</dd></div>
<div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
</dl>
</div>
<ol class="art-decisions">
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">Decirlo pronto.</p><div><h3>Una respuesta directa al principio de cada página</h3><p>Dos líneas que explican qué es esa página y para quién. Es lo primero que lee una persona con prisa y lo que un asistente puede citar.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">Un sitio para cada cosa.</p><div><h3>Páginas por sector, con sus casos enlazados</h3><p>Clínicas, hospitality, joyería. Cada una con sus proyectos reales y sus preguntas. Esa relación aporta contexto sobre la experiencia del estudio en cada sector.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">Sin ambigüedad.</p><div><h3>Datos estructurados escritos a medida</h3><p>Quién es la empresa, quién la dirige y qué contenido describe cada página. El marcado se revisa para que coincida con la información visible, tanto si lo genera un plugin como si se incorpora a medida.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">Un resumen para máquinas.</p><div><h3>Un archivo que presenta el sitio</h3><p>Un documento de texto, llamado llms.txt, que resume el estudio y enlaza páginas principales. Es un recurso complementario: no sustituye al contenido rastreable ni hay evidencia aquí de que haya generado recomendaciones. Google no exige archivos de texto especiales para sus funciones de IA.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">05</span><p class="art-spec">Constancia.</p><div><h3>Publicar sobre lo que sabemos</h3><p>Artículos que responden a preguntas concretas de cada sector, con ejemplos propios. Cada uno es una ocasión más de ser la fuente.</p></div></li>
</ol>
<blockquote class="art-pull" data-pull>
<p><span>No se trata</span> <span>de gustar a una máquina.</span> <em>Se trata de explicarse bien.</em></p>
</blockquote>
<p class="art-case-foot" data-rv>El detalle técnico está en <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a>, y la parte de composición en <a href="https://a-estudio.co/diseno-web-editorial/">diseño web editorial</a>.</p>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="fuera" aria-labelledby="h-fu">
<span class="art-kicker art-micro">05</span>
<h2 id="h-fu">
<span class="art-line"><span>La ficha de Google</span></span>
<span class="art-line"><span><em>y lo que pasa fuera de tu web.</em></span></span>
</h2>
<p data-rv>Las fuentes externas aportan contexto para contrastar lo que una marca afirma. Su presencia no garantiza una recomendación y cada sistema puede consultar fuentes diferentes.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Ficha de Google.</strong> Mantén la información local actualizada: actividad, ubicación y contacto. Es útil para la presencia en Google; su uso por otros asistentes depende de las fuentes que consulten.</li>
<li data-rv><strong>Opiniones.</strong> Las que describen el servicio con palabras propias aportan más que una puntuación.</li>
<li data-rv><strong>Directorios y asociaciones del sector.</strong> Colegios profesionales, guías especializadas y premios pueden aportar referencias verificables. Importan la pertinencia y el rigor de cada fuente.</li>
<li data-rv><strong>Menciones en medios y en webs de clientes.</strong> Una mención contextualizada en un proyecto permite comprobar la colaboración. Prioriza referencias reales y relevantes.</li>
<li data-rv><strong>Coherencia.</strong> Nombre, actividad y ciudad escritos igual en todas partes.</li>
</ul>
<aside class="art-aside" data-rv>
<span class="art-micro">Lo que nadie puede prometer</span>
<p>Ninguna agencia controla lo que responde un asistente. Las respuestas cambian según la pregunta, el momento y el usuario. Algunos asistentes muestran además anuncios, señalados como tales, que son otra cosa. <em>Quien garantiza una recomendación está vendiendo algo que no depende de él.</em></p>
</aside>
</section>
<section id="medir" aria-labelledby="h-me">
<span class="art-kicker art-micro">06</span>
<h2 id="h-me">
<span class="art-line"><span>Cómo saber</span></span>
<span class="art-line"><span><em>si está funcionando.</em></span></span>
</h2>
<p data-rv>Ninguna de estas comprobaciones recoge por sí sola todas las recomendaciones y contactos. Conviene combinar cuatro fuentes y registrar sus límites.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Pregunta a cada cliente cómo te encontró.</strong> Registra su respuesta, el asistente que recuerda, la consulta si la conoce y el canal de contacto. Incluye llamadas y WhatsApp, además del formulario.</li>
<li data-rv><strong>Haz tú las preguntas.</strong> Utiliza un conjunto estable de preguntas relevantes. Anota sistema, fecha, consulta, fuentes y respuesta. Una observación puntual no representa a todos los usuarios.</li>
<li data-rv><strong>Mira las visitas que llegan desde asistentes.</strong> Algunas visitas pueden identificarse por el dominio de referencia. Otras pueden perder ese dato o terminar en una llamada sin visita atribuible.</li>
<li data-rv><strong>Revisa Google Search Console.</strong> Permite analizar consultas y rendimiento en Google. No demuestra menciones en ChatGPT o Gemini ni permite atribuirles un contacto.</li>
</ul>
<p data-rv>No hay un plazo garantizado para aparecer. La búsqueda depende del acceso, la recuperación y la selección de fuentes. Publicar una página tampoco asegura que se incorpore al conocimiento de un modelo.</p>
</section>
<section id="revisar" aria-labelledby="h-rev" data-signals>
<span class="art-kicker art-micro">07</span>
<h2 id="h-rev">
<span class="art-line"><span>10 comprobaciones</span></span>
<span class="art-line"><span><em>para que un asistente te entienda.</em></span></span>
</h2>
<p class="art-note" data-rv>Marca las que tu web cumple hoy.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La portada dice qué eres, para quién y dónde en las dos primeras líneas.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Los servicios y sectores están explicados, con páginas propias cuando aportan contenido diferenciado.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Los titulares son texto, no imágenes.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Hay casos con nombre, descripción y enlace al resultado.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Se sabe quién dirige el negocio y cuál es su trayectoria.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las preguntas frecuentes están escritas como las hace un cliente.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Los datos estructurados pertinentes coinciden con el contenido visible y no se contradicen.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Carga rápido en el móvil.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La ficha de Google está completa y coincide con la web.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Tu nombre aparece igual en directorios, redes y webs de clientes.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>Esta lista orienta la revisión de contenido y acceso. <strong>No calcula la probabilidad de aparecer en una respuesta.</strong></p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">08</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Cómo puede mi negocio aparecer en ChatGPT?</h3><i aria-hidden="true"></i></summary><div><p>Revisa que la información sea accesible y explique con claridad tu actividad, servicios y experiencia. En ChatGPT Search, OpenAI distingue el acceso de OAI-SearchBot del rastreo para entrenamiento de GPTBot. Permitir el acceso para búsqueda no garantiza una mención.</p></div></details>
<details name="art-faq"><summary><h3>¿Se puede pagar para que ChatGPT me recomiende?</h3><i aria-hidden="true"></i></summary><div><p>No. Las recomendaciones que aparecen dentro de una respuesta no se compran. Algunos asistentes muestran anuncios, identificados como tales y separados de la respuesta. Desconfía de quien venda una mención garantizada.</p></div></details>
<details name="art-faq"><summary><h3>¿Sirve el SEO de siempre para aparecer en los asistentes de IA?</h3><i aria-hidden="true"></i></summary><div><p>Las bases de SEO ayudan a que el contenido sea accesible y comprensible. Google indica que siguen siendo aplicables a sus funciones de IA. Otros asistentes pueden utilizar mecanismos distintos; no existe una ponderación universal publicada para todos ellos.</p></div></details>
<details name="art-faq"><summary><h3>¿Influye el diseño de la web en que un asistente me nombre?</h3><i aria-hidden="true"></i></summary><div><p>El diseño y el desarrollo influyen en el acceso al contenido y en su claridad. Una buena estructura, texto accesible y funcionamiento cuidado facilitan su consulta; no determinan por sí solos que un asistente recomiende la marca.</p></div></details>
<details name="art-faq"><summary><h3>¿La ficha de Google ayuda a salir en la IA?</h3><i aria-hidden="true"></i></summary><div><p>Una ficha actualizada ayuda a mantener correcta la información local en Google. No es un requisito universal para aparecer en asistentes: depende de las fuentes y funciones que utilice cada sistema.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuánto se tarda en aparecer?</h3><i aria-hidden="true"></i></summary><div><p>No hay un plazo garantizado. El acceso a una página, su recuperación en una búsqueda y su selección como fuente son procesos distintos. Tampoco existe un calendario universal para incorporar una web al conocimiento aprendido de los modelos.</p></div></details>
<details name="art-faq"><summary><h3>¿Prepara A-ESTUDIO las webs para Google y para los asistentes de IA?</h3><i aria-hidden="true"></i></summary><div><p>Sí. La estructura, el texto, los datos estructurados y el rendimiento forman parte de cada proyecto de diseño web desde el inicio. No garantizamos posiciones ni menciones: entregamos una web que se puede entender.</p></div></details>
</div>
<p class="art-note">Fuentes consultadas el 8 de octubre de 2026: <a href="https://developers.openai.com/api/docs/bots" target="_blank" rel="noopener">OpenAI: rastreadores y acceso para búsqueda</a> y <a href="https://developers.google.com/search/docs/appearance/ai-features" target="_blank" rel="noopener">Google Search Central: funciones de IA y tu web</a>.</p>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">Web preparada para Google y la IA</a>
<a href="https://a-estudio.co/diseno-web-editorial/">Diseño web editorial</a>
<a href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web</a>
<a href="https://a-estudio.co/diseno-web-marcas-premium/">Diseño web para marcas premium</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Empieza por explicarte</span>
<h2 id="h-close">
<span class="art-line"><span>Si tu negocio es bueno</span></span>
<span class="art-line"><span><em>y un asistente no sabe contarlo.</em></span></span>
</h2>
<p data-rv>Cuéntanos a qué te dedicas y quién te busca. Revisamos tu web y te decimos qué le falta para que una persona, un buscador y un asistente entiendan lo mismo.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>
<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count >= 8){
result.innerHTML='Tu web cumple '+count+' de 10. <strong>La base está; lo que falta es afinar.</strong>';
}else{
result.innerHTML='Tu web cumple '+count+' de 10. <strong>Lo que queda sin marcar es por donde empezaríamos.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/como-aparecer-en-chatgpt/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Cómo aparecer en ChatGPT"
    },
    {
     "@type": "Thing",
     "name": "Optimización para asistentes de IA (GEO)"
    },
    {
     "@type": "Thing",
     "name": "Diseño y desarrollo web"
    }
   ],
   "mentions": [
    {
     "@type": "SoftwareApplication",
     "name": "ChatGPT"
    },
    {
     "@type": "SoftwareApplication",
     "name": "Gemini"
    },
    {
     "@type": "SoftwareApplication",
     "name": "Microsoft Copilot"
    },
    {
     "@type": "SoftwareApplication",
     "name": "Perplexity"
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/como-aparecer-en-chatgpt/#faq",
   "inLanguage": "es-ES",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Cómo puede mi negocio aparecer en ChatGPT?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Revisa que la información sea accesible y explique con claridad tu actividad, servicios y experiencia. En ChatGPT Search, OpenAI distingue el acceso de OAI-SearchBot del rastreo para entrenamiento de GPTBot. Permitir el acceso para búsqueda no garantiza una mención."
     }
    },
    {
     "@type": "Question",
     "name": "¿Se puede pagar para que ChatGPT me recomiende?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No. Las recomendaciones que aparecen dentro de una respuesta no se compran. Algunos asistentes muestran anuncios, identificados como tales y separados de la respuesta. Desconfía de quien venda una mención garantizada."
     }
    },
    {
     "@type": "Question",
     "name": "¿Sirve el SEO de siempre para aparecer en los asistentes de IA?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Las bases de SEO ayudan a que el contenido sea accesible y comprensible. Google indica que siguen siendo aplicables a sus funciones de IA. Otros asistentes pueden utilizar mecanismos distintos; no existe una ponderación universal publicada para todos ellos."
     }
    },
    {
     "@type": "Question",
     "name": "¿Influye el diseño de la web en que un asistente me nombre?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "El diseño y el desarrollo influyen en el acceso al contenido y en su claridad. Una buena estructura, texto accesible y funcionamiento cuidado facilitan su consulta; no determinan por sí solos que un asistente recomiende la marca."
     }
    },
    {
     "@type": "Question",
     "name": "¿La ficha de Google ayuda a salir en la IA?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Una ficha actualizada ayuda a mantener correcta la información local en Google. No es un requisito universal para aparecer en asistentes: depende de las fuentes y funciones que utilice cada sistema."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuánto se tarda en aparecer?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No hay un plazo garantizado. El acceso a una página, su recuperación en una búsqueda y su selección como fuente son procesos distintos. Tampoco existe un calendario universal para incorporar una web al conocimiento aprendido de los modelos."
     }
    },
    {
     "@type": "Question",
     "name": "¿Prepara A-ESTUDIO las webs para Google y para los asistentes de IA?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. La estructura, el texto, los datos estructurados y el rendimiento forman parte de cada proyecto de diseño web desde el inicio. No garantizamos posiciones ni menciones: entregamos una web que se puede entender."
     }
    }
   ]
  }
 ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/como-aparecer-en-chatgpt/">Cómo aparecer en ChatGPT y en los asistentes de IA: lo que depende de tu web</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Página web para alquiler vacacional, casa rural o villa: reservas directas sin depender de la plataforma</title>
		<link>https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Wed, 07 Oct 2026 16:54:19 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=30473</guid>

					<description><![CDATA[<p>Cuándo compensa una web propia para una casa rural, una villa o un alojamiento vacacional, qué debe tener, tres formas de reserva directa y diez comprobaciones.</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/">Página web para alquiler vacacional, casa rural o villa: reservas directas sin depender de la plataforma</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-30473">.elementor-30473 .elementor-element.elementor-element-c551111{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="30473" class="elementor elementor-30473 elementor-bc-flex-widget" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-c551111 e-con-full e-flex e-con e-parent" data-id="c551111" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-7d6be53 elementor-widget elementor-widget-html" data-id="7d6be53" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · PÁGINA WEB PARA ALQUILER VACACIONAL, CASA RURAL O VILLA
Widget HTML / Elementor Pro. Misma maqueta que /diseno-web-editorial/ (aeArt1).
URL: https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-body section > h3{margin:34px 0 10px}

/* fix: el texto de la lista debe partir línea en móvil */
html body #aeArt1#aeArt1 .art-checks button{white-space:normal !important;height:auto !important}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Hospitality · Reserva directa</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Página web para alquiler vacacional,</span></span>
<span class="art-line"><span><em>casa rural o villa: reservas directas</em></span></span>
<span class="art-line"><span><em>sin depender de la plataforma.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>Una web propia no sustituye a Airbnb ni a Booking: recoge a quien ya ha visto tu alojamiento allí y lo busca por su nombre, y a quien quiere repetir.</strong> Para una casa rural, una villa, un apartamento turístico o un hotel pequeño suele bastar una sola página bien hecha: el lugar, la casa contada con orden, lo que incluye, las normas, cómo llegar y una forma directa de pedir fechas.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-07">Actualizado · 7 octubre 2026</time> · 9 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/elim-ocean-marca-web-a-estudio.webp" width="1920" height="1200" loading="eager" decoding="async" alt="Apertura de la web de Elim Ocean, alojamiento vacacional en La Tejita: la casa del logotipo con la playa dentro, diseño de A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Elim Ocean · La Tejita, Tenerife</span>
<span>Un alojamiento con nombre propio se puede buscar.</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#para-que">Para qué sirve una web propia</a></li>
<li><a href="#cuando">Cuándo compensa</a></li>
<li><a href="#contenido">Qué debe tener</a></li>
<li><a href="#reserva">Tres formas de reservar</a></li>
<li><a href="#metodo">El caso Elim Ocean</a></li>
<li><a href="#legal">Registro, normas y plataformas</a></li>
<li><a href="#ia">Google, Maps y asistentes de IA</a></li>
<li><a href="#revisar">10 comprobaciones</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>Quien alquila una casa rural, una villa o un apartamento junto al mar suele tenerlo todo en una plataforma: las fotos, el calendario, los mensajes y las opiniones. Funciona, y por eso casi nadie se plantea otra cosa hasta que cambia una condición, baja la posición en el listado o un huésped que quería repetir no encuentra cómo hacerlo sin pasar otra vez por el buscador.</p>
<section id="para-que" aria-labelledby="h-pq">
<span class="art-kicker art-micro">01</span>
<h2 id="h-pq">
<span class="art-line"><span>Para qué sirve una web propia</span></span>
<span class="art-line"><span><em>si ya estás en las plataformas.</em></span></span>
</h2>
<p data-rv>Las plataformas dan visibilidad y resuelven el pago. Lo que no dan es un lugar que sea tuyo. En el listado, tu alojamiento es una ficha con el mismo formato que las demás, ordenada según reglas que no controlas.</p>
<p data-rv>Una <strong>página web para alquiler vacacional</strong> cumple tres funciones que la plataforma no cubre:</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Recoger a quien te busca por tu nombre.</strong> Muchos huéspedes ven un alojamiento en la plataforma y después escriben su nombre en Google para comprobar si existe fuera de ella. Si no hay nada, vuelven al listado.</li>
<li data-rv><strong>Facilitar que repitan y que te recomienden.</strong> Quien ya ha estado no necesita un intermediario para volver. Necesita una dirección que pueda recordar y pasar a otra persona.</li>
<li data-rv><strong>Contar el alojamiento a tu manera.</strong> Con tus fotografías en el orden que tú eliges, el texto que explica el lugar y las condiciones que tú fijas.</li>
</ul>
<p data-rv>Conviene decirlo claro: una web recién publicada no trae visitas por sí sola. Suma cuando alguien ya te está buscando, y tarda meses en aparecer para búsquedas generales de una zona.</p>
</section>
<section id="cuando" aria-labelledby="h-cu">
<span class="art-kicker art-micro">02</span>
<h2 id="h-cu">
<span class="art-line"><span>Cuándo compensa</span></span>
<span class="art-line"><span><em>y cuándo todavía no.</em></span></span>
</h2>
<p data-rv>No todos los alojamientos necesitan web propia desde el primer día. Estas son las señales que usamos para decidirlo.</p>
<h3>Compensa cuando</h3>
<ul class="art-list art-list--tight">
<li data-rv>El alojamiento tiene nombre, o puede tenerlo, y fotografías cuidadas.</li>
<li data-rv>Hay huéspedes que repiten o que llegan recomendados.</li>
<li data-rv>Gestionas varias unidades, o una sola de precio alto.</li>
<li data-rv>Recibes clientes de otros países y quieres explicarte en su idioma.</li>
<li data-rv>Quieres reducir la dependencia de una sola plataforma.</li>
</ul>
<h3>Todavía no cuando</h3>
<ul class="art-list art-list--tight">
<li data-rv>No hay fotografías a la altura del alojamiento. Es lo primero que hay que resolver.</li>
<li data-rv>Nadie va a contestar las solicitudes con rapidez. Una reserva directa sin respuesta se pierde.</li>
<li data-rv>El alojamiento no tiene todavía su registro turístico en regla.</li>
</ul>
</section>
<section id="contenido" aria-labelledby="h-co">
<span class="art-kicker art-micro">03</span>
<h2 id="h-co">
<span class="art-line"><span>Qué debe tener la web</span></span>
<span class="art-line"><span><em>de una casa rural, una villa o un apartamento.</em></span></span>
</h2>
<p data-rv>El <strong>diseño web para casas rurales</strong> y alojamientos pequeños no necesita muchas páginas. Necesita seis bloques bien resueltos, que a menudo caben en una sola.</p>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Una apertura que sitúe</h3><p>Dónde está, qué tipo de estancia propone y para cuántas personas. Una imagen del lugar y una frase que solo sirva para ese alojamiento.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>La casa, contada en orden</h3><p>Las estancias en el orden en que se recorren o en que se vive el día. Una selección de fotografías, no la galería completa de la plataforma.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Lo que incluye y lo que no</h3><p>Dormitorios y camas, baños, cocina, terraza, piscina, aparcamiento, conexión. En texto, para que lo lea una persona y lo entienda un buscador.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">4</span><div><h3>El lugar y cómo llegar</h3><p>Playa, pueblo o monte más cercano, distancias reales, aeropuerto o estación y qué se puede hacer alrededor. En una casa rural, es media decisión.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">5</span><div><h3>Normas y condiciones</h3><p>Hora de entrada y salida, capacidad, mascotas, tabaco, fiestas, cancelación. Quien reserva sin plataforma necesita verlas antes de escribir.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">6</span><div><h3>Una forma directa de reservar</h3><p>Visible en toda la página y resuelta en pocos pasos: fechas, huéspedes y un canal por el que alguien responde.</p></div></li>
</ol>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/elim-ocean-web-la-casa.webp" width="1920" height="1200" loading="lazy" decoding="async" alt="Galería de estancias de la web de Elim Ocean: dormitorios y terraza en una secuencia horizontal con la hora del día">
</div>
<figcaption class="art-micro">
<span>Elim Ocean</span>
<span>Las estancias, una detrás de otra, como se recorren.</span>
</figcaption>
</figure>
</section>
<section id="reserva" aria-labelledby="h-re">
<span class="art-kicker art-micro">04</span>
<h2 id="h-re">
<span class="art-line"><span>Tres formas de reservar</span></span>
<span class="art-line"><span><em>sin pasar por la plataforma.</em></span></span>
</h2>
<p data-rv>«Reserva directa» no significa siempre lo mismo. Hay tres niveles, y elegir bien evita pagar por una herramienta que el alojamiento no necesita.</p>
<div class="art-table" data-table role="region" aria-label="Tres formas de reserva directa para un alojamiento vacacional" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Opción</span></th>
<th scope="col">Cómo funciona</th>
<th scope="col">Para quién</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Solicitud de fechas</th><td>El huésped elige fechas y huéspedes y envía un mensaje ya redactado por WhatsApp o por correo. El propietario confirma disponibilidad y precio.</td><td>Una sola unidad, trato personal, pocas reservas al mes.</td></tr>
<tr><th scope="row">Calendario sincronizado</th><td>La web muestra los días libres, leídos del mismo calendario que usan las plataformas. La confirmación sigue siendo manual.</td><td>Alojamientos con mucha ocupación, para no contestar solicitudes de fechas ya cogidas.</td></tr>
<tr><th scope="row">Motor de reservas con pago</th><td>El huésped reserva y paga en la web. El motor bloquea las fechas en todos los canales.</td><td>Varias unidades, hoteles pequeños y casas rurales con muchas habitaciones.</td></tr>
</tbody>
</table>
</div>
<h3>Cómo evitar reservas duplicadas</h3>
<p data-rv>El riesgo de vender en varios sitios es que dos personas reserven la misma noche. Con solicitud de fechas no existe, porque nada se confirma sin que el propietario mire el calendario. En los otros dos niveles, la web y las plataformas deben compartir un único calendario que se actualice solo.</p>
</section>
</article>
</div>
<section class="art-case" id="metodo" aria-labelledby="h-case">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">05 · El caso</span>
<h2 id="h-case">
<span class="art-line"><span>Cómo lo resolvimos</span></span>
<span class="art-line"><span><em>en Elim Ocean.</em></span></span>
</h2>
<p data-rv><a href="https://a-estudio.co/elim-ocean/">Elim Ocean</a> es un alojamiento vacacional de dos dormitorios junto a la playa de La Tejita, en el sur de Tenerife. Estaba en las plataformas, con buenas fotografías, y no tenía ni marca ni lugar propio. En A-ESTUDIO creamos las dos cosas.</p>
<dl class="art-facts" data-rv>
<div><dt class="art-micro">Tipo</dt><dd>Alojamiento vacacional</dd></div>
<div><dt class="art-micro">Formato</dt><dd>Una página · español e inglés</dd></div>
<div><dt class="art-micro">Reserva</dt><dd>Solicitud por WhatsApp</dd></div>
<div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
</dl>
</div>
<ol class="art-decisions">
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">Primero, un nombre.</p><div><h3>Una marca que se pueda buscar</h3><p>Nombre, logotipo e isotipo: una casa sobre una ola. Sin nombre propio no hay nada que escribir en un buscador ni que recomendar a otra persona.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">Un día, no un inventario.</p><div><h3>La casa contada por horas</h3><p>La página sigue un día completo: desayuno en la terraza, playa, piscina, atardecer y noche. El color de fondo cambia con la hora.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">Enseñar lo que una foto no enseña.</p><div><h3>La misma estancia con dos luces</h3><p>Una línea que se arrastra compara el salón al mediodía y al atardecer. Es el detalle que la gente recuerda después.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">Pedir fechas en un gesto.</p><div><h3>Un mensaje ya escrito</h3><p>Fechas, huéspedes y nombre se convierten en un mensaje de WhatsApp listo para enviar. Las plataformas siguen enlazadas para quien prefiera reservar allí.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">05</span><p class="art-spec">Ligera y sin mantenimiento.</p><div><h3>Una página en código</h3><p>Sin gestor de contenidos ni analítica, con tipografías propias. Carga rápido en un teléfono y no exige actualizaciones cada mes.</p></div></li>
</ol>
<blockquote class="art-pull" data-pull>
<p><span>La plataforma</span> <span>te da visibilidad.</span> <em>El nombre es tuyo.</em></p>
</blockquote>
<p class="art-case-foot" data-rv>La ficha completa está en <a href="https://a-estudio.co/elim-ocean/">Elim Ocean</a>. Para establecimientos mayores, lee <a href="https://a-estudio.co/diseno-web-hoteles-lujo-resorts/">diseño web para hoteles de lujo y resorts</a> y el planteamiento del sector en <a href="https://a-estudio.co/hospitality/">diseño web para hospitality</a>.</p>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="legal" aria-labelledby="h-le">
<span class="art-kicker art-micro">06</span>
<h2 id="h-le">
<span class="art-line"><span>Registro, normas</span></span>
<span class="art-line"><span><em>y lo que las plataformas no permiten.</em></span></span>
</h2>
<p data-rv>Una web de alojamiento es también una página comercial, y tiene obligaciones. En España conviene revisar, como mínimo, estos puntos con la gestoría antes de publicar:</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Número de registro.</strong> El alojamiento debe mostrar su número de registro turístico allí donde se anuncia. Los requisitos cambian según la comunidad autónoma.</li>
<li data-rv><strong>Aviso legal.</strong> Quién es el titular y cómo contactar.</li>
<li data-rv><strong>Privacidad.</strong> Qué datos se recogen al pedir fechas, para qué y durante cuánto tiempo.</li>
<li data-rv><strong>Cookies.</strong> Si la web mide visitas, necesita aviso y consentimiento. Si no mide nada, no.</li>
</ul>
<aside class="art-aside" data-rv>
<span class="art-micro">Dónde sí y dónde no</span>
<p>Las plataformas no permiten incluir enlaces ni datos de contacto en el anuncio para llevar la reserva fuera. La web se da a conocer por otros caminos: una tarjeta con código QR dentro de la casa, el mensaje de despedida, la ficha de Google y las redes del alojamiento. <em>Quien ya ha estado es quien antes reserva directo.</em></p>
</aside>
</section>
<section id="ia" aria-labelledby="h-ia">
<span class="art-kicker art-micro">07</span>
<h2 id="h-ia">
<span class="art-line"><span>Que te encuentre Google</span></span>
<span class="art-line"><span><em>y que te nombre un asistente de IA.</em></span></span>
</h2>
<p data-rv>Cada vez más viajeros preguntan a un asistente: «una casa tranquila cerca de la playa para cuatro personas en el sur de Tenerife». Para que tu alojamiento pueda aparecer en esa respuesta, la web tiene que decir con palabras lo que es.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Nombre propio y ficha de Google.</strong> El nombre del alojamiento, escrito igual en la web, en el mapa y en las plataformas.</li>
<li data-rv><strong>Texto real.</strong> Tipo de alojamiento, zona, capacidad, dormitorios y servicios, escritos y no solo en imágenes.</li>
<li data-rv><strong>Datos estructurados de alojamiento.</strong> Indican a los buscadores qué es, dónde está y cómo se contacta.</li>
<li data-rv><strong>Los idiomas de tus huéspedes.</strong> Como mínimo, el local y el inglés, escritos y no traducidos de forma automática.</li>
<li data-rv><strong>Velocidad en el móvil.</strong> Fotografías grandes en formatos actuales, para que la página cargue con la cobertura de un aeropuerto.</li>
</ul>
<p data-rv>Nada de esto garantiza una posición ni una recomendación. Hace que la web pueda ser entendida. Lo explicamos en <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a>.</p>
</section>
<section id="revisar" aria-labelledby="h-rev" data-signals>
<span class="art-kicker art-micro">08</span>
<h2 id="h-rev">
<span class="art-line"><span>10 comprobaciones</span></span>
<span class="art-line"><span><em>para la web de tu alojamiento.</em></span></span>
</h2>
<p class="art-note" data-rv>Marca las que cumples hoy.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El alojamiento tiene un nombre propio y aparece al buscarlo en Google.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La apertura deja claro dónde está y para cuántas personas es.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las fotografías están seleccionadas y ordenadas, no volcadas.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Lo que incluye está escrito en texto.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Se explica cómo llegar, con distancias reales.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las normas y la cancelación se pueden leer antes de reservar.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Pedir fechas lleva menos de un minuto desde el móvil.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Alguien responde a las solicitudes el mismo día.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El número de registro y el aviso legal están visibles.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Hay versión en el idioma de tus huéspedes habituales.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>Cada punto sin marcar es una reserva que vuelve a la plataforma. <strong>O que no llega.</strong></p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">09</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Merece la pena una web propia si ya estoy en Airbnb y Booking?</h3><i aria-hidden="true"></i></summary><div><p>Sí cuando el alojamiento tiene nombre propio, buenas fotografías y huéspedes que repiten o llegan recomendados. La web no sustituye a las plataformas: recoge a quien te busca por tu nombre y a quien quiere volver sin intermediarios. No trae visitas por sí sola en las primeras semanas.</p></div></details>
<details name="art-faq"><summary><h3>¿Qué debe tener la página web de una casa rural o un alojamiento vacacional?</h3><i aria-hidden="true"></i></summary><div><p>Una apertura que diga dónde está y para cuántas personas es, la casa contada con una selección de fotografías, lo que incluye en texto, el lugar y cómo llegar, las normas y la cancelación, y una forma directa de pedir fechas visible en toda la página. También el número de registro, el aviso legal y la política de privacidad.</p></div></details>
<details name="art-faq"><summary><h3>¿Puedo poner el enlace de mi web en el anuncio de la plataforma?</h3><i aria-hidden="true"></i></summary><div><p>No. Las plataformas de reserva no permiten enlaces ni datos de contacto en el anuncio para llevar la reserva fuera. La web se da a conocer con una tarjeta o un código QR dentro del alojamiento, en el mensaje de despedida, en la ficha de Google y en las redes sociales.</p></div></details>
<details name="art-faq"><summary><h3>¿Necesito un motor de reservas con pago?</h3><i aria-hidden="true"></i></summary><div><p>No siempre. Para una sola unidad con trato personal suele bastar una solicitud de fechas por WhatsApp o por correo. El calendario sincronizado ayuda cuando hay mucha ocupación, y el motor con pago compensa con varias unidades o en hoteles pequeños.</p></div></details>
<details name="art-faq"><summary><h3>¿Cómo se evitan las reservas duplicadas entre la web y las plataformas?</h3><i aria-hidden="true"></i></summary><div><p>Con solicitud de fechas no hay riesgo, porque el propietario confirma después de mirar el calendario. Si la web muestra disponibilidad o cobra, debe compartir con las plataformas un único calendario que se actualice de forma automática.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuánto cuesta la página web de un alojamiento vacacional?</h3><i aria-hidden="true"></i></summary><div><p>Depende del número de páginas, de los idiomas, del tipo de reserva y del nivel de diseño y animación. En A-ESTUDIO una web esencial, de pocas páginas, parte de 2.300 €. Una marca nueva, un motor de reservas o varias unidades amplían el alcance. El precio se cierra por escrito para un alcance acordado.</p></div></details>
<details name="art-faq"><summary><h3>¿Trabaja A-ESTUDIO con alojamientos fuera de Tenerife?</h3><i aria-hidden="true"></i></summary><div><p>Sí. Trabajamos en remoto desde Madrid y Tenerife con casas rurales, villas, apartamentos turísticos y hoteles pequeños de toda España y de Latinoamérica, con webs en español, inglés y otros idiomas. La comunicación con el cliente es en español.</p></div></details>
</div>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/diseno-web-hoteles-lujo-resorts/">Diseño web para hoteles de lujo y resorts</a>
<a href="https://a-estudio.co/hospitality/">Diseño web para hospitality</a>
<a href="https://a-estudio.co/elim-ocean/">Caso Elim Ocean</a>
<a href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Empieza por el nombre</span>
<h2 id="h-close">
<span class="art-line"><span>Si tu alojamiento merece</span></span>
<span class="art-line"><span><em>que lo busquen por su nombre.</em></span></span>
</h2>
<p data-rv>Cuéntanos dónde está, cuántas unidades tiene y cómo reservan hoy tus huéspedes. Te decimos qué tipo de web necesita y qué no hace falta todavía.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>
<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count >= 8){
result.innerHTML='Tu web cumple '+count+' de 10. <strong>La base está; lo que falta es afinar.</strong>';
}else{
result.innerHTML='Tu web cumple '+count+' de 10. <strong>Lo que queda sin marcar es por donde empezaríamos.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Página web para alquiler vacacional"
    },
    {
     "@type": "Thing",
     "name": "Diseño web para casas rurales"
    },
    {
     "@type": "Thing",
     "name": "Reserva directa"
    }
   ],
   "mentions": [
    {
     "@type": "CreativeWork",
     "name": "Elim Ocean · Marca y web",
     "url": "https://a-estudio.co/elim-ocean/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/#faq",
   "inLanguage": "es-ES",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Merece la pena una web propia si ya estoy en Airbnb y Booking?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí cuando el alojamiento tiene nombre propio, buenas fotografías y huéspedes que repiten o llegan recomendados. La web no sustituye a las plataformas: recoge a quien te busca por tu nombre y a quien quiere volver sin intermediarios. No trae visitas por sí sola en las primeras semanas."
     }
    },
    {
     "@type": "Question",
     "name": "¿Qué debe tener la página web de una casa rural o un alojamiento vacacional?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Una apertura que diga dónde está y para cuántas personas es, la casa contada con una selección de fotografías, lo que incluye en texto, el lugar y cómo llegar, las normas y la cancelación, y una forma directa de pedir fechas visible en toda la página. También el número de registro, el aviso legal y la política de privacidad."
     }
    },
    {
     "@type": "Question",
     "name": "¿Puedo poner el enlace de mi web en el anuncio de la plataforma?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No. Las plataformas de reserva no permiten enlaces ni datos de contacto en el anuncio para llevar la reserva fuera. La web se da a conocer con una tarjeta o un código QR dentro del alojamiento, en el mensaje de despedida, en la ficha de Google y en las redes sociales."
     }
    },
    {
     "@type": "Question",
     "name": "¿Necesito un motor de reservas con pago?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No siempre. Para una sola unidad con trato personal suele bastar una solicitud de fechas por WhatsApp o por correo. El calendario sincronizado ayuda cuando hay mucha ocupación, y el motor con pago compensa con varias unidades o en hoteles pequeños."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cómo se evitan las reservas duplicadas entre la web y las plataformas?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Con solicitud de fechas no hay riesgo, porque el propietario confirma después de mirar el calendario. Si la web muestra disponibilidad o cobra, debe compartir con las plataformas un único calendario que se actualice de forma automática."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuánto cuesta la página web de un alojamiento vacacional?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Depende del número de páginas, de los idiomas, del tipo de reserva y del nivel de diseño y animación. En A-ESTUDIO una web esencial, de pocas páginas, parte de 2.300 €. Una marca nueva, un motor de reservas o varias unidades amplían el alcance. El precio se cierra por escrito para un alcance acordado."
     }
    },
    {
     "@type": "Question",
     "name": "¿Trabaja A-ESTUDIO con alojamientos fuera de Tenerife?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. Trabajamos en remoto desde Madrid y Tenerife con casas rurales, villas, apartamentos turísticos y hoteles pequeños de toda España y de Latinoamérica, con webs en español, inglés y otros idiomas. La comunicación con el cliente es en español."
     }
    }
   ]
  }
 ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/">Página web para alquiler vacacional, casa rural o villa: reservas directas sin depender de la plataforma</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Diseño web para hoteles de lujo y resorts: de la atmósfera a la reserva directa</title>
		<link>https://a-estudio.co/diseno-web-hoteles-lujo-resorts/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Wed, 07 Oct 2026 11:40:12 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=30464</guid>

					<description><![CDATA[<p>Qué necesita la página web de un hotel de lujo o un resort: las páginas clave, la reserva directa, los destinos remotos, los idiomas y diez comprobaciones.</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-hoteles-lujo-resorts/">Diseño web para hoteles de lujo y resorts: de la atmósfera a la reserva directa</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-30464">.elementor-30464 .elementor-element.elementor-element-1c7d6de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="30464" class="elementor elementor-30464 elementor-bc-flex-widget" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-1c7d6de e-con-full e-flex e-con e-parent" data-id="1c7d6de" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-e38af0d elementor-widget elementor-widget-html" data-id="e38af0d" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · DISEÑO WEB PARA HOTELES DE LUJO Y RESORTS
Widget HTML / Elementor Pro. Misma maqueta que /diseno-web-editorial/ (aeArt1).
URL: https://a-estudio.co/diseno-web-hoteles-lujo-resorts/
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-body .art-fig{max-width:520px}
#aeArt1 .art-body .art-fig img{max-height:none}
#aeArt1 .art-body section > h3{margin:34px 0 10px}

/* fix: el texto de la lista debe partir línea en móvil */
html body #aeArt1#aeArt1 .art-checks button{white-space:normal !important;height:auto !important}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Hospitality · Lujo</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Diseño web para hoteles de lujo</span></span>
<span class="art-line"><span><em>y resorts: de la atmósfera</em></span></span>
<span class="art-line"><span><em>a la reserva directa.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>La web de un hotel de lujo o de un resort tiene dos trabajos: hacer que alguien se imagine allí y permitirle reservar sin salir de ella.</strong> Para lograrlo necesita una apertura que transmita el lugar, páginas de habitación con información completa, un motor de reservas integrado en el diseño, versiones cuidadas en cada idioma y respuestas claras sobre cómo llegar, sobre todo cuando el destino es remoto.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-07">Actualizado · 7 octubre 2026</time> · 10 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/obra-rocas-lead.webp" width="2000" height="1125" loading="eager" decoding="async" alt="Vista aérea de Las Rocas Beach Club en Costa Adeje, con piscinas, hamacas y el mar: imagen de apertura de su web, diseñada por A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Las Rocas Beach Club · Costa Adeje</span>
<span>La web empieza por el lugar. El servicio llega después.</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#decision">Cómo decide un huésped</a></li>
<li><a href="#paginas">Las páginas que no pueden faltar</a></li>
<li><a href="#reserva">Reserva directa</a></li>
<li><a href="#tabla">Web de catálogo o de lujo</a></li>
<li><a href="#metodo">El método</a></li>
<li><a href="#remoto">Destinos remotos e islas</a></li>
<li><a href="#internacional">Huéspedes internacionales</a></li>
<li><a href="#ia">Google y asistentes de IA</a></li>
<li><a href="#revisar">10 comprobaciones</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>Nadie reserva una habitación de lujo: reserva unos días de su vida en un lugar concreto. La decisión se toma a miles de kilómetros, en una pantalla, comparando tres o cuatro hoteles que a primera vista ofrecen lo mismo. Lo que inclina la balanza rara vez es el precio. Es la sensación de que ese sitio, y no otro, es el que estaba buscando.</p>
<section id="decision" aria-labelledby="h-dec">
<span class="art-kicker art-micro">01</span>
<h2 id="h-dec">
<span class="art-line"><span>Cómo decide hoy</span></span>
<span class="art-line"><span><em>el huésped de un hotel de lujo.</em></span></span>
</h2>
<p data-rv>El recorrido habitual tiene varias paradas. Descubre el hotel en una recomendación, en una red social o, cada vez más, preguntando a un asistente de IA. Lo mira en una plataforma de reservas para situar el precio. Y después, casi siempre, visita la web del propio hotel para comprobar si es lo que parece.</p>
<p data-rv>Esa visita es el momento que el hotel controla. Si la web transmite menos que las fotos de la plataforma, el huésped vuelve a ella y reserva allí, con la comisión correspondiente. Si la web transmite más y permite reservar con la misma facilidad, la reserva se queda en casa.</p>
<p data-rv>Por eso el <strong>diseño web para hoteles de lujo</strong> no es una cuestión estética. Decide dónde se cierra la venta y cuánto margen conserva el hotel en cada noche.</p>
</section>
<section id="paginas" aria-labelledby="h-pag">
<span class="art-kicker art-micro">02</span>
<h2 id="h-pag">
<span class="art-line"><span>Las seis páginas</span></span>
<span class="art-line"><span><em>que sostienen la web de un hotel.</em></span></span>
</h2>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Una portada que sitúa</h3><p>Dónde está el hotel, qué tipo de estancia propone y para quién. Una imagen o un vídeo breve del lugar, una frase que solo pueda pertenecer a ese sitio y el acceso a la reserva siempre visible.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>Habitaciones, suites y villas</h3><p>La página donde más se decide. Cada categoría necesita fotografías reales de esa categoría, superficie, orientación y vistas, capacidad, plano si lo hay y lo que incluye. La comparación entre categorías debe poder hacerse sin abrir cinco pestañas.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Gastronomía</h3><p>Restaurantes y bares con carácter propio: propuesta, horarios, carta o menú en texto y reserva de mesa. Un PDF escaneado no se lee en el móvil ni lo entiende un buscador.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">4</span><div><h3>Experiencias y bienestar</h3><p>Spa, excursiones, deporte, actividades para familias. Explicadas con duración, temporada y forma de reservarlas. Son lo que diferencia una estancia de otra en un destino parecido.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">5</span><div><h3>El lugar y cómo llegar</h3><p>Entorno, distancias, aeropuertos, traslados y mejor época. En un destino conocido es una página de servicio; en uno remoto es la que resuelve la duda principal.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">6</span><div><h3>Eventos y celebraciones</h3><p>Bodas, retiros y reuniones de empresa son otra línea de negocio, con otro cliente y otro recorrido: espacios, capacidades, dossier y un contacto directo con quien lo gestiona.</p></div></li>
</ol>
</section>
<section id="reserva" aria-labelledby="h-res">
<span class="art-kicker art-micro">03</span>
<h2 id="h-res">
<span class="art-line"><span>Reserva directa:</span></span>
<span class="art-line"><span><em>lo que la web puede recuperar.</em></span></span>
</h2>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/obra-rocas-d1.webp" width="900" height="1125" loading="lazy" decoding="async" alt="Web de Las Rocas Beach Club en un portátil, con el botón de reserva visible sobre la imagen del lugar">
</div>
<figcaption class="art-micro">
<span>Las Rocas Beach Club</span>
<span>El botón de reserva convive con la imagen; no la interrumpe.</span>
</figcaption>
</figure>
<p data-rv>Las plataformas de reserva aportan visibilidad, y pocos hoteles pueden prescindir de ellas. A cambio cobran una comisión por cada reserva. Cada reserva que pasa de la plataforma a la web propia conserva ese margen y, además, deja al hotel la relación con el huésped.</p>
<p data-rv>Para que eso ocurra, la web tiene que ganar en tres cosas:</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Confianza.</strong> Fotografías de más calidad que las de la plataforma, información más completa y una política de cancelación clara.</li>
<li data-rv><strong>Facilidad.</strong> Fechas, huéspedes y categoría en pocos pasos, con precio final visible y sin saltar a una página que parece de otra empresa.</li>
<li data-rv><strong>Motivo.</strong> Una ventaja concreta por reservar directamente: mejor tarifa, un extra, una condición más flexible. Dicha en la portada, no escondida.</li>
</ul>
<h3>El motor de reservas, dentro del diseño</h3>
<p data-rv>El motor es una herramienta externa, y casi todos permiten adaptar tipografía, colores y pasos. El trabajo de diseño consiste en que el huésped no note la costura: que el momento de pagar se parezca al resto de la web. Es también donde más cuenta la versión móvil, porque buena parte de las reservas se inician en un teléfono.</p>
</section>
<section id="tabla" aria-labelledby="h-tab">
<span class="art-kicker art-micro">04</span>
<h2 id="h-tab">
<span class="art-line"><span>Web de catálogo</span></span>
<span class="art-line"><span><em>o web de hotel de lujo.</em></span></span>
</h2>
<div class="art-table" data-table role="region" aria-label="Diferencias entre una web de catálogo y una web de hotel de lujo" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Aspecto</span></th>
<th scope="col">Web de catálogo</th>
<th scope="col">Web de hotel de lujo</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Portada</th><td>Carrusel de fotos y buscador.</td><td>El lugar, una idea y la reserva a mano.</td></tr>
<tr><th scope="row">Habitaciones</th><td>Lista con foto pequeña y «desde».</td><td>Cada categoría con imágenes propias, medidas, vistas y lo que incluye.</td></tr>
<tr><th scope="row">Reserva</th><td>Enlace a otra página con otro aspecto.</td><td>Motor integrado en el diseño, con precio final claro.</td></tr>
<tr><th scope="row">Idiomas</th><td>Traducción automática.</td><td>Cada versión escrita para su mercado.</td></tr>
<tr><th scope="row">Cómo llegar</th><td>Un mapa.</td><td>Aeropuertos, traslados, tiempos y mejor época.</td></tr>
<tr><th scope="row">Móvil</th><td>La versión de escritorio, encogida.</td><td>Un recorrido pensado para reservar con una mano.</td></tr>
</tbody>
</table>
</div>
</section>
</article>
</div>
<section class="art-case" id="metodo" aria-labelledby="h-case">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">05 · El método</span>
<h2 id="h-case">
<span class="art-line"><span>Cómo lo trabajamos</span></span>
<span class="art-line"><span><em>en A-ESTUDIO.</em></span></span>
</h2>
<p data-rv>Hemos dirigido la marca y la web de <a href="https://a-estudio.co/las-rocas-beach-club/">Las Rocas Beach Club</a>, en Costa Adeje, y la marca y la web de <a href="https://a-estudio.co/ibiza-sovereign/">Ibiza Sovereign</a>, una firma privada de alto standing en Ibiza para clientes internacionales. Y, a otra escala, la marca y la web de <a href="https://a-estudio.co/elim-ocean/">Elim Ocean</a>, un alojamiento vacacional en La Tejita, Tenerife, con reserva directa. En todos los casos el encargo era el mismo: que el lugar se entendiera antes de leer una sola línea.</p>
<dl class="art-facts" data-rv>
<div><dt class="art-micro">Sector</dt><dd>Hoteles, resorts y beach clubs</dd></div>
<div><dt class="art-micro">Idiomas</dt><dd>Español, inglés y otros</dd></div>
<div><dt class="art-micro">Sedes</dt><dd>Madrid · Tenerife</dd></div>
<div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
</dl>
</div>
<ol class="art-decisions">
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">Primero, el lugar.</p><div><h3>Una apertura que solo valga para ese hotel</h3><p>La imagen y la frase de portada se eligen para que no puedan cambiarse por las de otro establecimiento. Si sirven para cualquiera, no sirven.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">Mostrar menos. Hacer imaginar más.</p><div><h3>Una edición de imágenes, no una galería</h3><p>Diez fotografías bien elegidas y bien ordenadas transmiten más que ochenta. La selección forma parte del diseño.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">La información, completa y a mano.</p><div><h3>Atmósfera arriba, datos debajo</h3><p>Cada página abre con la sensación y continúa con lo práctico: medidas, horarios, lo que incluye, cómo se reserva. Una no sustituye a la otra.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">Reservar sin salir.</p><div><h3>La reserva como parte del recorrido</h3><p>El acceso a reservar acompaña toda la visita y el motor se adapta al diseño. El huésped no siente que cambia de sitio en el momento de pagar.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">05</span><p class="art-spec">Visible desde el primer día.</p><div><h3>Preparada para Google y para los asistentes de IA</h3><p>Texto real, datos estructurados de alojamiento y respuestas a lo que pregunta un viajero. Se entrega con la web, no como un añadido posterior.</p></div></li>
</ol>
<blockquote class="art-pull" data-pull>
<p><span>La estancia</span> <span>empieza en la web.</span> <em>La reserva, también.</em></p>
</blockquote>
<p class="art-case-foot" data-rv>El planteamiento completo del sector está en <a href="https://a-estudio.co/hospitality/">diseño web para hospitality</a> y el del servicio en <a href="https://a-estudio.co/diseno-web-premium/">diseño web premium</a>.</p>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="remoto" aria-labelledby="h-rem">
<span class="art-kicker art-micro">06</span>
<h2 id="h-rem">
<span class="art-line"><span>Destinos remotos, islas privadas</span></span>
<span class="art-line"><span><em>y resorts difíciles de explicar.</em></span></span>
</h2>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/03/ibiza-sovereing-ultima.jpg" width="1080" height="1350" loading="lazy" decoding="async" alt="Web de Ibiza Sovereign desplegada en una pantalla: villa frente al mar, servicios y método, diseño de A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Ibiza Sovereign</span>
<span>Villa, servicios y forma de trabajar, en una sola lectura.</span>
</figcaption>
</figure>
<p data-rv>Un hotel en una capital no necesita explicar dónde está. Un resort en una isla privada, en la selva o en una costa poco conocida sí. Antes de pensar en la habitación, el huésped se hace tres preguntas, y la web debe contestarlas sin que tenga que escribir a nadie.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>¿Cómo se llega?</strong> Aeropuerto más cercano, vuelos habituales, traslado en barco, coche o avioneta, duración de cada tramo y quién lo organiza.</li>
<li data-rv><strong>¿Qué voy a encontrar?</strong> Clima por meses, qué hay alrededor y qué no hay. La honestidad sobre el aislamiento es parte del atractivo.</li>
<li data-rv><strong>¿Es seguro y está bien atendido?</strong> Asistencia médica, conectividad, personal, políticas de cancelación por causas meteorológicas.</li>
</ul>
<p data-rv>Cuanto más singular es el destino, más peso tiene esta parte. Un lugar extraordinario pierde reservas cuando el viaje hasta él parece una incógnita.</p>
<aside class="art-aside" data-rv>
<span class="art-micro">Exclusividad y claridad</span>
<p>Un resort muy exclusivo puede no publicar tarifas ni disponibilidad, y atender cada solicitud de forma personal. Es una decisión legítima, siempre que la web diga cómo se solicita, quién responde y en cuánto tiempo. <em>La discreción no está reñida con la información.</em></p>
</aside>
</section>
<section id="internacional" aria-labelledby="h-int">
<span class="art-kicker art-micro">07</span>
<h2 id="h-int">
<span class="art-line"><span>Huéspedes de varios países,</span></span>
<span class="art-line"><span><em>una sola web.</em></span></span>
</h2>
<p data-rv>Un hotel de lujo en España, México, Colombia o el Caribe recibe huéspedes que leen en español, en inglés y, a menudo, en un tercer idioma. La web tiene que funcionar para todos sin convertirse en tres webs distintas.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Cada idioma, escrito.</strong> Una traducción automática se nota en la primera frase. El texto en inglés debe sonar tan cuidado como el original.</li>
<li data-rv><strong>Moneda y medidas.</strong> Precios en la moneda del huésped cuando el motor lo permite, y superficies en metros y en pies cuadrados si el mercado lo pide.</li>
<li data-rv><strong>Contacto por el canal que usa cada mercado.</strong> Teléfono, correo y mensajería, con horario de respuesta.</li>
<li data-rv><strong>Señalización correcta para buscadores.</strong> Cada versión debe indicar su idioma y su región para que Google muestre la adecuada en cada país.</li>
</ul>
<p data-rv>En A-ESTUDIO desarrollamos webs en español, en inglés y en otros idiomas para marcas de España y de Latinoamérica. La dirección del proyecto y la comunicación con el cliente son en español.</p>
</section>
<section id="ia" aria-labelledby="h-ia">
<span class="art-kicker art-micro">08</span>
<h2 id="h-ia">
<span class="art-line"><span>Que te encuentre Google</span></span>
<span class="art-line"><span><em>y que te recomiende un asistente de IA.</em></span></span>
</h2>
<p data-rv>Cada vez más viajeros empiezan con una pregunta a un asistente: «un hotel tranquilo frente al mar para una semana en noviembre». Para aparecer en esa respuesta, la web tiene que contener la información con la que el asistente pueda justificar la recomendación.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Texto real en cada página.</strong> Tipo de hotel, ubicación exacta, número de habitaciones, servicios y temporada, escritos y no solo en imágenes.</li>
<li data-rv><strong>Datos estructurados de alojamiento.</strong> Indican a los buscadores que se trata de un hotel, dónde está, qué servicios ofrece y cómo se contacta.</li>
<li data-rv><strong>Preguntas frecuentes contestadas.</strong> Horarios, mascotas, niños, traslados, accesibilidad. Son las mismas preguntas que recibe la recepción.</li>
<li data-rv><strong>Velocidad con imágenes grandes.</strong> Formatos actuales y tamaños adaptados a cada pantalla, para que la fotografía a pantalla completa no retrase la carga.</li>
</ul>
<p data-rv>Ninguna de estas medidas garantiza una posición ni una recomendación. Sí hacen que la web pueda ser entendida. Lo desarrollamos en <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a>.</p>
</section>
<section id="revisar" aria-labelledby="h-rev" data-signals>
<span class="art-kicker art-micro">09</span>
<h2 id="h-rev">
<span class="art-line"><span>10 comprobaciones</span></span>
<span class="art-line"><span><em>para la web de tu hotel.</em></span></span>
</h2>
<p class="art-note" data-rv>Marca las que tu web cumple hoy.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La portada deja claro dónde está el hotel y qué tipo de estancia propone.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El acceso a reservar está visible en todas las páginas.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Cada categoría de habitación tiene fotos propias, medidas y lo que incluye.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El motor de reservas mantiene el aspecto de la web.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Se explica una ventaja concreta por reservar directamente.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Hay una página de cómo llegar, con tiempos y traslados.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las versiones en otros idiomas están escritas, no traducidas automáticamente.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las cartas y los menús están en texto, no en PDF.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>En móvil se puede completar una reserva con comodidad.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las imágenes cargan rápido incluso con mala conexión.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>Cada punto sin marcar es un motivo para reservar en otro sitio. <strong>O en otra plataforma.</strong></p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">10</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Qué debe tener la página web de un hotel de lujo?</h3><i aria-hidden="true"></i></summary><div><p>Una portada que sitúe el lugar, páginas de habitación con fotografías propias, medidas y lo que incluye, gastronomía y experiencias explicadas, una página de cómo llegar, un motor de reservas integrado en el diseño, versiones cuidadas en cada idioma y carga rápida en móvil.</p></div></details>
<details name="art-faq"><summary><h3>¿Cómo puede un hotel aumentar las reservas directas desde su web?</h3><i aria-hidden="true"></i></summary><div><p>Ofreciendo más confianza e información que las plataformas, un proceso de reserva corto con precio final visible y una ventaja clara por reservar directamente. Cada reserva directa evita la comisión de la plataforma.</p></div></details>
<details name="art-faq"><summary><h3>¿Se puede integrar un motor de reservas en una web a medida?</h3><i aria-hidden="true"></i></summary><div><p>Sí. La mayoría de los motores de reserva permiten adaptar tipografía, colores y pasos para que el proceso mantenga el aspecto de la web. El trabajo consiste en que el huésped no perciba el cambio al pasar a reservar.</p></div></details>
<details name="art-faq"><summary><h3>¿Qué necesita la web de un resort en un destino remoto o una isla privada?</h3><i aria-hidden="true"></i></summary><div><p>Explicar con detalle cómo se llega, con aeropuertos, traslados y tiempos, qué clima hay en cada época, qué servicios existen en el lugar y cómo se atiende una solicitud. Cuanto más singular es el destino, más importante es reducir la incertidumbre del viaje.</p></div></details>
<details name="art-faq"><summary><h3>¿En cuántos idiomas conviene tener la web de un hotel?</h3><i aria-hidden="true"></i></summary><div><p>En el idioma local y en inglés como mínimo, y en un tercero si un mercado concreto aporta una parte relevante de los huéspedes. Cada versión debe estar escrita para ese público, no traducida automáticamente.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuánto cuesta la web de un hotel de lujo o un resort?</h3><i aria-hidden="true"></i></summary><div><p>Depende del número de páginas, de los idiomas, de la integración con el motor de reservas y del nivel de diseño y animación. En A-ESTUDIO una web esencial parte de 2.300 € y un proyecto extenso puede superar los 30.000 €.</p></div></details>
<details name="art-faq"><summary><h3>¿Trabaja A-ESTUDIO con hoteles fuera de España?</h3><i aria-hidden="true"></i></summary><div><p>Sí. Trabajamos en remoto con marcas de España y de Latinoamérica y desarrollamos webs en español, inglés y otros idiomas. La comunicación con el cliente es en español.</p></div></details>
</div>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/hospitality/">Diseño web para hospitality</a>
<a href="https://a-estudio.co/pagina-web-alquiler-vacacional-casa-rural/">Página web para alquiler vacacional y casas rurales</a>
<a href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web</a>
<a href="https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/">Diseño web para estudios de arquitectura</a>
<a href="https://a-estudio.co/diseno-web-marcas-premium/">Diseño web para marcas premium</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Empieza por el lugar</span>
<h2 id="h-close">
<span class="art-line"><span>Si tu hotel es mejor</span></span>
<span class="art-line"><span><em>de lo que su web deja ver.</em></span></span>
</h2>
<p data-rv>Cuéntanos dónde está, quién lo visita y cómo reserva hoy. Revisamos tu web actual y te decimos qué cambiaríamos para que más reservas se queden en ella.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>
<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count >= 8){
result.innerHTML='Tu web cumple '+count+' de 10. <strong>La base está; lo que falta es afinar.</strong>';
}else{
result.innerHTML='Tu web cumple '+count+' de 10. <strong>Lo que queda sin marcar es por donde empezaríamos.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/diseno-web-hoteles-lujo-resorts/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Diseño web para hoteles"
    },
    {
     "@type": "Thing",
     "name": "Reserva directa"
    },
    {
     "@type": "Thing",
     "name": "Hoteles de lujo y resorts"
    }
   ],
   "mentions": [
    {
     "@type": "CreativeWork",
     "name": "Las Rocas Beach Club · Marca y web",
     "url": "https://a-estudio.co/las-rocas-beach-club/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    },
    {
     "@type": "CreativeWork",
     "name": "Ibiza Sovereign · Marca y web",
     "url": "https://a-estudio.co/ibiza-sovereign/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/diseno-web-hoteles-lujo-resorts/#faq",
   "inLanguage": "es-ES",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Qué debe tener la página web de un hotel de lujo?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Una portada que sitúe el lugar, páginas de habitación con fotografías propias, medidas y lo que incluye, gastronomía y experiencias explicadas, una página de cómo llegar, un motor de reservas integrado en el diseño, versiones cuidadas en cada idioma y carga rápida en móvil."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cómo puede un hotel aumentar las reservas directas desde su web?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Ofreciendo más confianza e información que las plataformas, un proceso de reserva corto con precio final visible y una ventaja clara por reservar directamente. Cada reserva directa evita la comisión de la plataforma."
     }
    },
    {
     "@type": "Question",
     "name": "¿Se puede integrar un motor de reservas en una web a medida?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. La mayoría de los motores de reserva permiten adaptar tipografía, colores y pasos para que el proceso mantenga el aspecto de la web. El trabajo consiste en que el huésped no perciba el cambio al pasar a reservar."
     }
    },
    {
     "@type": "Question",
     "name": "¿Qué necesita la web de un resort en un destino remoto o una isla privada?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Explicar con detalle cómo se llega, con aeropuertos, traslados y tiempos, qué clima hay en cada época, qué servicios existen en el lugar y cómo se atiende una solicitud. Cuanto más singular es el destino, más importante es reducir la incertidumbre del viaje."
     }
    },
    {
     "@type": "Question",
     "name": "¿En cuántos idiomas conviene tener la web de un hotel?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "En el idioma local y en inglés como mínimo, y en un tercero si un mercado concreto aporta una parte relevante de los huéspedes. Cada versión debe estar escrita para ese público, no traducida automáticamente."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuánto cuesta la web de un hotel de lujo o un resort?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Depende del número de páginas, de los idiomas, de la integración con el motor de reservas y del nivel de diseño y animación. En A-ESTUDIO una web esencial parte de 2.300 € y un proyecto extenso puede superar los 30.000 €."
     }
    },
    {
     "@type": "Question",
     "name": "¿Trabaja A-ESTUDIO con hoteles fuera de España?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. Trabajamos en remoto con marcas de España y de Latinoamérica y desarrollamos webs en español, inglés y otros idiomas. La comunicación con el cliente es en español."
     }
    }
   ]
  }
 ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-hoteles-lujo-resorts/">Diseño web para hoteles de lujo y resorts: de la atmósfera a la reserva directa</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Diseño web premium para estudios de arquitectura e interiorismo: cómo presentar una obra</title>
		<link>https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Wed, 07 Oct 2026 11:18:13 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=30459</guid>

					<description><![CDATA[<p>Qué necesita la web de un estudio de arquitectura o interiorismo, con una maqueta 3D que se construye y una planta que se dibuja al desplazarte.</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/">Diseño web premium para estudios de arquitectura e interiorismo: cómo presentar una obra</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-30459">.elementor-30459 .elementor-element.elementor-element-341a8e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="30459" class="elementor elementor-30459" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-341a8e7 e-con-full e-flex e-con e-parent" data-id="341a8e7" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-ea360fe elementor-widget elementor-widget-html" data-id="ea360fe" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · DISEÑO WEB PARA ESTUDIOS DE ARQUITECTURA E INTERIORISMO
Widget HTML / Elementor Pro. Misma maqueta que /diseno-web-editorial/ (aeArt1).
URL: https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-body .art-fig{max-width:520px}
#aeArt1 .art-body .art-fig img{max-height:none}
</style>
<style id="ae-arq-styles">
#aeArt1 .arq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);margin-top:clamp(30px,5vh,60px)}
#aeArt1 .arq-demo{min-width:0}
#aeArt1 .arq-stage{position:relative;aspect-ratio:16/13;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
#aeArt1 .arq-stage--dark{background:#262523}
#aeArt1 .arq-stage--light{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ln)}
#aeArt1 .arq-demo--3d .arq-stage{cursor:grab}
#aeArt1 .arq-demo--3d .arq-stage.is-drag{cursor:grabbing}
#aeArt1 .arq-svg{display:block;width:100%;height:100%;overflow:visible}
#aeArt1 .arq-svg text{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
#aeArt1 .arq-hud{position:absolute;left:14px;right:14px;top:13px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
html body #aeArt1#aeArt1 .arq-stage--dark .arq-hud span{color:#D8D2C7 !important}
html body #aeArt1#aeArt1 .arq-stage--light .arq-hud span{color:var(--mu) !important}
#aeArt1 .arq-ctrl{display:flex;align-items:center;gap:16px;padding:12px 0 4px}
html body #aeArt1#aeArt1 .arq-play{appearance:none;-webkit-appearance:none;flex:none;min-height:38px;padding:9px 14px !important;border:1px solid var(--ln2) !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;font:400 10.5px/1 var(--mono) !important;letter-spacing:.14em !important;text-transform:uppercase !important;cursor:pointer;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
html body #aeArt1#aeArt1 .arq-play:is(:hover,:focus-visible){--fg:var(--paper);background:var(--ink) !important;border-color:var(--ink) !important}
#aeArt1 .arq-play:focus-visible,#aeArt1 .arq-range input:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
#aeArt1 .arq-range{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
#aeArt1 .arq-range input{flex:1;min-width:0;width:100%;height:28px;margin:0;accent-color:var(--olive);background:transparent;cursor:pointer}
#aeArt1 .arq-demo figcaption{margin-top:4px}
#aeArt1 .arq-expect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,64px);margin-top:clamp(40px,7vh,84px);padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--ln2)}
#aeArt1 .arq-expect h3{font-size:clamp(24px,2.4vw,34px);line-height:1.12;letter-spacing:-.01em}
#aeArt1 .arq-expect li{padding:14px 0;border-bottom:1px solid var(--ln);font-size:16px;line-height:1.6}
#aeArt1 .arq-expect li:first-child{padding-top:0}
#aeArt1 .arq-expect li strong{font-weight:400}
@media (max-width:900px){
#aeArt1 .arq-grid{grid-template-columns:minmax(0,1fr);gap:34px}
#aeArt1 .arq-demo--2d .arq-svg text{font-size:19px;letter-spacing:.05em}
#aeArt1 .arq-expect{grid-template-columns:minmax(0,1fr)}
}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Arquitectura · Interiorismo</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Diseño web premium para estudios</span></span>
<span class="art-line"><span><em>de arquitectura e interiorismo:</em></span></span>
<span class="art-line"><span><em>cómo presentar una obra.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>La web de un estudio de arquitectura o interiorismo funciona cuando cada obra se entiende sin haber estado en ella: qué se encargó, qué se decidió y cómo quedó.</strong> Para eso necesita un archivo de proyectos bien ordenado, fichas que combinen fotografía, plano y datos, y un recorrido claro desde la obra hasta el encargo.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-08">Actualizado · 8 octubre 2026</time> · 10 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/03/SOVEREING-1.jpg" width="2560" height="1440" loading="eager" decoding="async" alt="Villa con piscina, muro de piedra y celosía de madera frente al mar en Ibiza: imagen de apertura de la web de Ibiza Sovereign, diseño de A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Ibiza Sovereign</span>
<span>Arquitectura, paisaje y horizonte abren la web antes que cualquier servicio.</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#problema">Por qué se parecen tanto</a></li>
<li><a href="#ficha">La ficha de obra</a></li>
<li><a href="#demos">Maqueta y planta animadas</a></li>
<li><a href="#tabla">Galería o web editorial</a></li>
<li><a href="#archivo">Ordenar el archivo</a></li>
<li><a href="#metodo">El método editorial</a></li>
<li><a href="#interiorismo">Interiorismo</a></li>
<li><a href="#internacional">Estudios internacionales</a></li>
<li><a href="#revisar">9 comprobaciones</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>Un edificio se recorre. Una web se mira. Entre una cosa y otra se pierde casi todo lo que hace valiosa a una obra: la escala, la luz a una hora concreta, el motivo por el que una escalera está donde está. La web de un estudio existe para recuperar parte de eso, y la mayoría renuncia antes de intentarlo: una retícula de fotografías, un nombre, un año.</p>
<section id="problema" aria-labelledby="h-pro">
<span class="art-kicker art-micro">01</span>
<h2 id="h-pro">
<span class="art-line"><span>Por qué las webs de arquitectura</span></span>
<span class="art-line"><span><em>se parecen tanto entre sí.</em></span></span>
</h2>
<p data-rv>Fondo blanco, tipografía fina, una cuadrícula de imágenes y un menú de tres palabras. El modelo es elegante y tiene sentido: deja hablar a la obra. El problema es que, repetido en miles de estudios, deja de distinguir a ninguno.</p>
<p data-rv>Hay una segunda consecuencia, menos visible. Una web hecha solo de imágenes no explica nada. Quien llega —un promotor, una familia que va a construir su casa, una cadena hotelera— ve espacios bonitos, pero no sabe qué problema resolvió el estudio, con qué presupuesto de partida ni en qué tipo de encargos es especialmente bueno. El texto aporta contexto explícito a buscadores y asistentes, sin depender únicamente de la interpretación de imágenes.</p>
<p data-rv>Un <strong>diseño web para arquitectos</strong> que merezca llamarse premium no consiste en añadir efectos a esa cuadrícula. Consiste en decidir qué debe entender el visitante de cada obra y construir la página para que lo entienda.</p>
</section>
<section id="ficha" aria-labelledby="h-fic">
<span class="art-kicker art-micro">02</span>
<h2 id="h-fic">
<span class="art-line"><span>La ficha de obra:</span></span>
<span class="art-line"><span><em>siete partes que la hacen legible.</em></span></span>
</h2>
<p data-rv>La ficha de proyecto es la página más importante de la web de un estudio. Es donde se decide si alguien escribe.</p>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Una imagen de apertura elegida</h3><p>No la más espectacular, sino la que resume la decisión principal del proyecto. Si la obra se explica por su relación con el terreno, la apertura es exterior; si se explica por un patio, es el patio.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>El encargo en dos líneas</h3><p>Qué se pidió, para quién y con qué condicionantes. Es el texto que más falta en las webs de arquitectura y el que más ayuda a un futuro cliente a reconocerse.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Los datos de la obra</h3><p>Ubicación, año, superficie, tipología, estado —construida, en obra, concurso— y alcance del trabajo del estudio. Ordenados siempre igual, para poder comparar un proyecto con otro.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">4</span><div><h3>Planos que se puedan leer</h3><p>Una planta y una sección dicen lo que veinte fotografías no alcanzan. Deben estar dibujadas para pantalla: línea limpia, escala gráfica, ampliables en móvil y con un pie que indique qué mirar.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">5</span><div><h3>Una secuencia con ritmo</h3><p>Exterior, llegada, espacio principal, detalle, material. El orden de las imágenes reproduce un recorrido. Alternar tamaños evita que el visitante pase las fotografías sin verlas.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">6</span><div><h3>Los créditos</h3><p>Equipo, colaboradores, constructora y, siempre, quien firma la fotografía. Acreditar bien es una cuestión de rigor y también una señal de cómo trabaja el estudio.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">7</span><div><h3>Una salida</h3><p>Al final de la ficha, el visitante debería poder ir a una obra relacionada o iniciar una conversación. Una ficha que termina en el pie de página desaprovecha el momento de mayor interés.</p></div></li>
</ol>
</section>
</article>
</div>
<section class="art-case arq-demos" id="demos" aria-labelledby="h-demos">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">03 · Demostración</span>
<h2 id="h-demos">
<span class="art-line"><span>Una obra que se construye</span></span>
<span class="art-line"><span><em>mientras se lee.</em></span></span>
</h2>
<p data-rv>En lugar de describirlo, lo enseñamos. Estas dos piezas están hechas con código, sin vídeo ni imágenes: una maqueta que se levanta por fases y una planta que se dibuja trazo a trazo. Avanzan al desplazarte; también puedes reproducirlas o mover el control.</p>
</div>
<div class="arq-grid" data-ae-arq>
<figure class="arq-demo arq-demo--3d" data-arq="3d">
<div class="arq-stage arq-stage--dark">
<svg class="arq-svg" viewBox="0 0 640 520" role="img" aria-label="Maqueta tridimensional de una vivienda de dos plantas que se construye por fases: terreno, cimentación, estructura, forjado, cerramientos y cubierta"></svg>
<div class="arq-hud" aria-hidden="true"><span class="art-micro" data-arq-phase>01 · Terreno</span><span class="art-micro" data-arq-pct>0%</span></div>
</div>
<div class="arq-ctrl">
<button type="button" class="arq-play" data-arq-play>Reproducir</button>
<label class="arq-range"><span class="art-micro">Fase</span><input type="range" min="0" max="100" value="0" step="1" data-arq-range aria-label="Fase de construcción de la maqueta"></label>
</div>
<figcaption class="art-micro">
<span>Maqueta 3D</span>
<span>Se levanta al desplazarte. Arrástrala para girarla.</span>
</figcaption>
</figure>
<figure class="arq-demo arq-demo--2d" data-arq="2d">
<div class="arq-stage arq-stage--light">
<svg class="arq-svg" viewBox="0 0 640 520" role="img" aria-label="Planta de una vivienda que se dibuja trazo a trazo: muros, tabiquería, patio, carpintería, mobiliario, cotas y rótulos" fill="none" stroke-linecap="square">
<g stroke="#313131">
<path data-d=".02,.2" pathLength="1" stroke-width="5" d="M64 110H576V430H64Z"/>
<path data-d=".18,.27" pathLength="1" stroke-width="4" d="M256 110V300"/>
<path data-d=".24,.32" pathLength="1" stroke-width="4" d="M64 300H210M246 300H256"/>
<path data-d=".28,.36" pathLength="1" stroke-width="4" d="M416 250V330M416 366V430"/>
<path data-d=".32,.4" pathLength="1" stroke-width="4" d="M416 250H500M536 250H576"/>
<path data-d=".38,.48" pathLength="1" stroke-width="1.4" d="M300 150H380V230H300ZM305 155H375V225H305Z"/>
<circle data-d=".44,.52" pathLength="1" stroke-width="1.1" cx="340" cy="190" r="19"/>
<path data-d=".48,.54" pathLength="1" stroke-width="1.1" d="M340 176V204M326 190H354M330 180L350 200M350 180L330 200"/>
<path data-d=".5,.58" pathLength="1" stroke-width="1.1" d="M210 300V264A36 36 0 0 1 246 300"/>
<path data-d=".52,.6" pathLength="1" stroke-width="1.1" d="M416 330H452A36 36 0 0 1 416 366"/>
<path data-d=".54,.62" pathLength="1" stroke-width="1.1" d="M500 250V286A36 36 0 0 0 536 250"/>
<path data-d=".58,.68" pathLength="1" stroke-width="1.1" d="M270 330H380V390H270ZM281 330V390M292 330V390M303 330V390M314 330V390M325 330V390M336 330V390M347 330V390M358 330V390M369 330V390"/>
<path data-d=".64,.7" pathLength="1" stroke-width="1.1" d="M276 360H372M364 354L372 360L364 366"/>
</g>
<g stroke="#6A645A" stroke-width="1">
<path data-d=".64,.74" pathLength="1" d="M120 170H200V214H120ZM130 160H150V170M170 160H190V170M130 214V224H150V214M170 214V224H190V214M110 182H120M110 202H120M200 182H210M200 202H210"/>
<path data-d=".68,.78" pathLength="1" d="M96 346H216V384H96ZM96 346V336H216V346M110 396H200M236 340H254V390H236Z"/>
<path data-d=".7,.8" pathLength="1" d="M474 320H556V404H474ZM474 340H556M484 326H510V336H484ZM520 326H546V336H520ZM450 396H466V416H450Z"/>
<path data-d=".72,.8" pathLength="1" d="M440 130H560V150H440ZM452 130V150M548 130V150M462 172H538V200H462Z"/>
</g>
<g stroke="#615D36" stroke-width="1">
<path data-d=".78,.88" pathLength="1" d="M64 84H576M64 78V90M256 78V90M576 78V90"/>
<path data-d=".8,.9" pathLength="1" d="M38 110V430M32 110H44M32 300H44M32 430H44"/>
<path data-d=".9,.98" pathLength="1" d="M64 474H192M64 469V479M128 469V479M192 469V479"/>
<circle data-d=".9,.97" pathLength="1" cx="556" cy="474" r="13"/>
<path data-d=".93,.99" pathLength="1" d="M556 484V464M551 470L556 463L561 470"/>
</g>
<g stroke="none" fill="#615D36" font-size="14" text-anchor="middle">
<text data-f=".84,.92" x="160" y="70">6,00</text>
<text data-f=".85,.93" x="416" y="70">10,00</text>
<text data-f=".86,.94" x="24" y="208" transform="rotate(-90 24 208)">6,00</text>
<text data-f=".87,.95" x="24" y="368" transform="rotate(-90 24 368)">4,00</text>
<text data-f=".94,1" x="128" y="500">0 · 2 · 4 m</text>
<text data-f=".95,1" x="556" y="506">N</text>
</g>
<g stroke="none" fill="#313131" font-size="15" text-anchor="middle">
<text data-f=".86,.93" x="160" y="262">Cocina</text>
<text data-f=".88,.95" x="156" y="416">Estar</text>
<text data-f=".9,.96" x="340" y="252">Patio</text>
<text data-f=".9,.97" x="500" y="226">Galería</text>
<text data-f=".92,.98" x="512" y="306">Dormitorio</text>
</g>
</svg>
<div class="arq-hud" aria-hidden="true"><span class="art-micro" data-arq-phase>01 · Trazado</span><span class="art-micro" data-arq-pct>0%</span></div>
</div>
<div class="arq-ctrl">
<button type="button" class="arq-play" data-arq-play>Reproducir</button>
<label class="arq-range"><span class="art-micro">Trazo</span><input type="range" min="0" max="100" value="0" step="1" data-arq-range aria-label="Avance del dibujo de la planta"></label>
</div>
<figcaption class="art-micro">
<span>Planta 2D</span>
<span>Muros, carpintería, mobiliario y cotas, en el orden en que se dibujan.</span>
</figcaption>
</figure>
</div>
<div class="arq-expect" data-rv>
<h3>Qué puedes esperar de una animación así.</h3>
<ul>
<li><strong>Que el proyecto se entienda.</strong> Una maqueta que se levanta por fases explica estructura, forjados y cerramientos mejor que un párrafo. Una planta que se dibuja enseña a leerla.</li>
<li><strong>Que pese poco.</strong> Son dibujo vectorial generado con código, sin vídeo y sin librerías externas. Están planteadas para limitar recursos externos. Su impacto debe medirse en la página completa y en dispositivos reales; estar hechas con código no garantiza un tiempo de carga concreto.</li>
<li><strong>Que funcione en cualquier pantalla.</strong> Se adaptan al móvil, se manejan con el dedo o con el teclado y, si alguien tiene reducido el movimiento en su dispositivo, muestran directamente el resultado final.</li>
<li><strong>Que sea vuestra.</strong> Se construye a partir de los planos o del modelo del estudio, con su propia línea gráfica. Aquí la vivienda es inventada; en tu web sería una obra real.</li>
<li><strong>Lo que no promete.</strong> No sustituye a la fotografía ni garantiza encargos. Su objetivo es facilitar la comprensión del proyecto. El tiempo de permanencia y las consultas deben comprobarse con datos.</li>
</ul>
</div>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="tabla" aria-labelledby="h-tab">
<span class="art-kicker art-micro">04</span>
<h2 id="h-tab">
<span class="art-line"><span>Web de galería</span></span>
<span class="art-line"><span><em>o web con dirección editorial.</em></span></span>
</h2>
<div class="art-table" data-table role="region" aria-label="Diferencias entre una web de galería y una web con dirección editorial para un estudio de arquitectura" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Aspecto</span></th>
<th scope="col">Web de galería</th>
<th scope="col">Web con dirección editorial</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Portada</th><td>Carrusel de imágenes.</td><td>Una posición: qué hace el estudio y para quién.</td></tr>
<tr><th scope="row">Archivo</th><td>Todas las obras con el mismo peso.</td><td>Obras destacadas y archivo completo, con filtros.</td></tr>
<tr><th scope="row">Ficha</th><td>Fotografías y un párrafo.</td><td>Encargo, datos, planos, secuencia y créditos.</td></tr>
<tr><th scope="row">Texto</th><td>Mínimo, a menudo dentro de imágenes.</td><td>Texto real, que leen personas, buscadores y asistentes de IA.</td></tr>
<tr><th scope="row">Móvil</th><td>La cuadrícula, apilada.</td><td>Otra secuencia, pensada para una pantalla estrecha.</td></tr>
<tr><th scope="row">Contacto</th><td>Un correo en el pie.</td><td>Un recorrido distinto para cada tipo de encargo.</td></tr>
</tbody>
</table>
</div>
<p data-rv>Ninguna de las dos es más «bonita». La segunda trabaja más para el estudio. Lo desarrollamos en la guía sobre <a href="https://a-estudio.co/diseno-web-editorial/">diseño web editorial</a>.</p>
</section>
<section id="archivo" aria-labelledby="h-arc">
<span class="art-kicker art-micro">05</span>
<h2 id="h-arc">
<span class="art-line"><span>Cómo ordenar un archivo</span></span>
<span class="art-line"><span><em>con muchas obras.</em></span></span>
</h2>
<p data-rv>Un estudio con veinte años de trabajo puede tener más de cien proyectos. Enseñarlos todos igual es la forma más rápida de que no se vea ninguno.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Pocas obras destacadas.</strong> Entre seis y doce, con ficha completa. Son las que definen al estudio hoy y las que atraen el tipo de encargo que quiere repetir.</li>
<li data-rv><strong>Un archivo para el resto.</strong> Una vista más ligera, con imagen, nombre, lugar y año, que demuestra trayectoria sin exigir una ficha desarrollada por proyecto.</li>
<li data-rv><strong>Filtros que respondan a cómo busca el cliente.</strong> Tipología —vivienda, hotel, oficina, retail—, escala y estado. El año interesa al estudio; la tipología, a quien va a contratar.</li>
<li data-rv><strong>Una forma sencilla de añadir obra.</strong> Si publicar un proyecto nuevo requiere a un programador, la web se queda parada en el año en que se lanzó.</li>
</ul>
<aside class="art-aside" data-rv>
<span class="art-micro">Lo que no conviene enseñar</span>
<p>Un proyecto antiguo que ya no representa al estudio resta más de lo que suma. Editar el archivo también es diseñar: <em>lo que se deja fuera define tanto como lo que se muestra.</em></p>
</aside>
</section>
</article>
</div>
<section class="art-case" id="metodo" aria-labelledby="h-case">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">06 · El método</span>
<h2 id="h-case">
<span class="art-line"><span>Dirección editorial</span></span>
<span class="art-line"><span><em>aplicada al espacio.</em></span></span>
</h2>
<p data-rv>En A-ESTUDIO trabajamos con marcas cuyo valor hay que mirar despacio: clínicas, hoteles, joyería. Un estudio de arquitectura o de interiorismo plantea el mismo reto con otro material. Así trasladamos a una web de obra lo que hacemos en <a href="https://a-estudio.co/diseno-web-premium/">diseño web premium</a>.</p>
<dl class="art-facts" data-rv>
<div><dt class="art-micro">Enfoque</dt><dd>Dirección editorial</dd></div>
<div><dt class="art-micro">Idiomas</dt><dd>Español, inglés y otros</dd></div>
<div><dt class="art-micro">Sedes</dt><dd>Madrid · Tenerife</dd></div>
<div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
</dl>
</div>
<ol class="art-decisions">
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">Una idea por obra.</p><div><h3>Cada proyecto abre con su tesis</h3><p>Antes de la primera fotografía, una frase que diga qué resolvió el proyecto. El visitante mira las imágenes sabiendo qué buscar en ellas.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">La planta también se lee.</p><div><h3>Dibujo y fotografía, en la misma secuencia</h3><p>El plano no va al final como un anexo. Aparece cuando ayuda a entender la imagen que tiene al lado.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">Pocas obras, bien contadas.</p><div><h3>Formatos distintos para pesos distintos</h3><p>Las obras que definen al estudio reciben una página con desarrollo propio. El resto vive en un archivo ordenado por tipología.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">El lugar, antes que el servicio.</p><div><h3>La atmósfera como información</h3><p>La luz, el material y el entorno se muestran con el tamaño que necesitan. Es lo que hicimos en <a href="https://a-estudio.co/ibiza-sovereign/">Ibiza Sovereign</a>: la web abre con la villa y el horizonte.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">05</span><p class="art-spec">Hablemos de tu proyecto.</p><div><h3>El contacto como conclusión</h3><p>El formulario distingue el tipo de encargo —vivienda, promoción, hotel, reforma— y llega cuando el visitante ya ha visto cómo trabaja el estudio.</p></div></li>
</ol>
<blockquote class="art-pull" data-pull>
<p><span>Una obra</span> <span>no se enseña.</span> <em>Se explica.</em></p>
</blockquote>
<p class="art-case-foot" data-rv>Más sobre este enfoque en el <a href="https://a-estudio.co/estudio-diseno-web-editorial/">estudio de diseño web editorial</a> y en <a href="https://a-estudio.co/diseno-web-marcas-premium/">diseño web para marcas premium</a>.</p>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="interiorismo" aria-labelledby="h-int">
<span class="art-kicker art-micro">07</span>
<h2 id="h-int">
<span class="art-line"><span>Interiorismo:</span></span>
<span class="art-line"><span><em>lo que cambia respecto a la arquitectura.</em></span></span>
</h2>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/03/ibiza-sovereing-3-.jpg" width="1080" height="1350" loading="lazy" decoding="async" alt="Web de Ibiza Sovereign en un portátil: la villa ocupa toda la pantalla y el titular se apoya sobre la arquitectura, diseño de A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Ibiza Sovereign</span>
<span>El espacio a pantalla completa; el texto, encima y en pocas palabras.</span>
</figcaption>
</figure>
<p data-rv>El proceso de decisión en interiorismo depende del tipo de encargo, su presupuesto y las personas implicadas. Mira la web con una pregunta concreta: ¿harían algo así en mi casa, en mi restaurante, en mi hotel?</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>El material, de cerca.</strong> Maderas, piedras, tejidos y herrajes necesitan imágenes de detalle. Un interior se juzga por lo que se toca.</li>
<li data-rv><strong>El antes y el después.</strong> En reformas, mostrar el estado inicial explica el trabajo mejor que cualquier texto.</li>
<li data-rv><strong>Residencial y contract, separados.</strong> Una familia y una cadena hotelera buscan cosas distintas y deben encontrar su recorrido sin pasar por el del otro.</li>
<li data-rv><strong>El proceso.</strong> Fases, plazos orientativos y qué incluye el servicio —proyecto, dirección de obra, mobiliario—. Reduce la primera barrera para escribir.</li>
</ul>
<p data-rv>Cuando el encargo es un hotel o un restaurante, la web del estudio y la del negocio se parecen en una cosa: las dos deben trasladar una atmósfera sin esconder la información práctica. Lo tratamos en <a href="https://a-estudio.co/hospitality/">diseño web para hospitality</a> y en la guía de <a href="https://a-estudio.co/diseno-web-hoteles-lujo-resorts/">diseño web para hoteles de lujo y resorts</a>.</p>
</section>
<section id="internacional" aria-labelledby="h-inl">
<span class="art-kicker art-micro">08</span>
<h2 id="h-inl">
<span class="art-line"><span>Estudios que trabajan</span></span>
<span class="art-line"><span><em>en varios países.</em></span></span>
</h2>
<p data-rv>Un estudio con obra en más de un país necesita que su web responda también a quien no lo conoce de nada.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Idiomas con traducción propia.</strong> Cada versión se escribe, no se pasa por un traductor automático. Los nombres de tipologías y los términos técnicos cambian de un mercado a otro.</li>
<li data-rv><strong>Prensa, premios y publicaciones.</strong> Con fecha, medio y enlace. Para un cliente que llega de fuera son la primera prueba de solvencia.</li>
<li data-rv><strong>Un dossier descargable.</strong> Promotores e instituciones siguen pidiendo un PDF. Conviene que salga de la misma web y se actualice con ella.</li>
<li data-rv><strong>Velocidad con imágenes grandes.</strong> Las fotografías de arquitectura pesan. Formatos modernos, tamaños adaptados y carga progresiva permiten enseñarlas a pantalla completa sin castigar al visitante.</li>
<li data-rv><strong>Texto que puedan leer los asistentes de IA.</strong> Tipología, ciudad, año y descripción en texto real hacen que una obra pueda aparecer cuando alguien pregunta por estudios con experiencia en ese tipo de proyecto. Más en <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a>.</li>
</ul>
</section>
<section id="revisar" aria-labelledby="h-rev" data-signals>
<span class="art-kicker art-micro">09</span>
<h2 id="h-rev">
<span class="art-line"><span>9 comprobaciones</span></span>
<span class="art-line"><span><em>para la web de tu estudio.</em></span></span>
</h2>
<p class="art-note" data-rv>Marca las que tu web cumple hoy.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La portada dice qué tipo de proyectos hace el estudio y para quién.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Hay obras destacadas, distintas del archivo completo.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Cada ficha explica el encargo en una o dos frases.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Los datos de cada obra aparecen siempre en el mismo orden.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Hay al menos un plano legible en las obras principales.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El archivo se puede filtrar por tipología.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Fotógrafos y colaboradores están acreditados.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>En móvil las imágenes cargan rápido y los planos se pueden ampliar.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Desde cualquier ficha se puede iniciar una conversación.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>Una web de estudio no necesita más obras. <strong>Necesita que cada obra se entienda.</strong></p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">10</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Qué debe tener la web de un estudio de arquitectura?</h3><i aria-hidden="true"></i></summary><div><p>Una portada que diga qué hace el estudio y para quién, un archivo de obras con filtros por tipología, fichas de proyecto con encargo, datos, planos, fotografías y créditos, una página del estudio con equipo y reconocimientos, y un contacto que distinga el tipo de encargo.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuántos proyectos conviene mostrar en la web de un estudio?</h3><i aria-hidden="true"></i></summary><div><p>Entre seis y doce obras destacadas con ficha completa, y el resto en un archivo más ligero. Mostrar todos los proyectos con el mismo peso hace más difícil ver los que mejor representan al estudio.</p></div></details>
<details name="art-faq"><summary><h3>¿En qué se diferencia la web de un estudio de interiorismo?</h3><i aria-hidden="true"></i></summary><div><p>Necesita más imagen de detalle y de material, casos de antes y después en reformas, recorridos separados para residencial y contract, y una explicación clara del proceso y de lo que incluye el servicio.</p></div></details>
<details name="art-faq"><summary><h3>¿Una web de arquitectura con muchas imágenes puede cargar rápido?</h3><i aria-hidden="true"></i></summary><div><p>Sí. Con formatos de imagen actuales, tamaños adaptados a cada pantalla y carga progresiva, las fotografías pueden mostrarse a gran tamaño sin penalizar la velocidad ni el posicionamiento.</p></div></details>
<details name="art-faq"><summary><h3>¿Cómo puede aparecer un estudio de arquitectura en ChatGPT o en Gemini?</h3><i aria-hidden="true"></i></summary><div><p>No hay garantía, pero ayuda que cada obra tenga texto real con tipología, ubicación, año y descripción, que la web use datos estructurados y que el estudio aparezca citado en medios y directorios del sector.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuánto cuesta la web de un estudio de arquitectura?</h3><i aria-hidden="true"></i></summary><div><p>Depende del número de obras con ficha desarrollada, de los idiomas y del nivel de diseño y animación. En A-ESTUDIO una web esencial parte de 2.300 € y un proyecto extenso puede superar los 30.000 €.</p></div></details>
</div>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/diseno-web-editorial/">Diseño web editorial</a>
<a href="https://a-estudio.co/diseno-web-premium/">Diseño web premium a medida</a>
<a href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web</a>
<a href="https://a-estudio.co/hospitality/">Diseño web para hospitality</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Empieza por tus obras</span>
<h2 id="h-close">
<span class="art-line"><span>Si la web de tu estudio enseña</span></span>
<span class="art-line"><span><em>menos de lo que construís.</em></span></span>
</h2>
<p data-rv>Cuéntanos qué proyectos definen hoy a tu estudio y a qué tipo de cliente quieres llegar. Revisamos tu web actual y te decimos qué cambiaríamos.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>
<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count >= 7){
result.innerHTML='Tu web cumple '+count+' de 9. <strong>La base está; lo que falta es afinar.</strong>';
}else{
result.innerHTML='Tu web cumple '+count+' de 9. <strong>Lo que queda sin marcar es por donde empezaríamos.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script id="ae-arq-demos">
(function(){
'use strict';
var NS='http://www.w3.org/2000/svg';
var done=new WeakSet();
var mq=window.matchMedia?window.matchMedia('(prefers-reduced-motion: reduce)'):{matches:false};
function clamp(v,a,b){return v<a?a:(v>b?b:v);}
function ease(t){t=clamp(t,0,1);return 1-Math.pow(1-t,3);}
function span(p,a,b){return ease((p-a)/(b-a));}
function el(n,a){var e=document.createElementNS(NS,n);for(var k in a){e.setAttribute(k,a[k]);}return e;}
function phaseOf(list,p){var out=list[0][1];for(var i=0;i<list.length;i++){if(p>=list[i][0]){out=list[i][1];}}return out;}

function control(root,render){
var stage=root.querySelector('.arq-stage');
var range=root.querySelector('[data-arq-range]');
var play=root.querySelector('[data-arq-play]');
var pct=root.querySelector('[data-arq-pct]');
var state={p:mq.matches?1:0,manual:mq.matches,visible:false};
var anim=0,tick=0;
function set(v){
state.p=clamp(v,0,1);
if(range){range.value=String(Math.round(state.p*100));}
if(pct){pct.textContent=Math.round(state.p*100)+'%';}
render(state.p);
}
function fromScroll(){
tick=0;
if(state.manual||!state.visible){return;}
var r=stage.getBoundingClientRect();
var vh=window.innerHeight||1;
var start=vh*0.92;
var dist=vh*0.72+r.height*0.2;
set((start-r.top)/dist);
}
function onScroll(){if(!tick){tick=window.requestAnimationFrame(fromScroll);}}
function stop(){if(anim){window.cancelAnimationFrame(anim);anim=0;}}
if('IntersectionObserver' in window){
new IntersectionObserver(function(en){state.visible=en[0].isIntersecting;if(state.visible){onScroll();}},{rootMargin:'20% 0px 20% 0px'}).observe(stage);
}else{state.visible=true;}
window.addEventListener('scroll',onScroll,{passive:true});
window.addEventListener('resize',onScroll,{passive:true});
if(range){range.addEventListener('input',function(){state.manual=true;stop();set(Number(range.value)/100);});}
if(play){play.addEventListener('click',function(){
state.manual=true;stop();
if(mq.matches){set(1);return;}
var t0=0,dur=5200;
function step(now){
if(!t0){t0=now;}
var k=clamp((now-t0)/dur,0,1);
set(k);
if(k<1){anim=window.requestAnimationFrame(step);}else{anim=0;}
}
set(0);
anim=window.requestAnimationFrame(step);
});}
set(state.p);
return state;
}

function demo3d(root){
var svg=root.querySelector('svg');
var stage=root.querySelector('.arq-stage');
var label=root.querySelector('[data-arq-phase]');
if(!svg||!stage){return;}
var W=640,H=520,S=25,CY=322,pitch=0.6;
var yaw=-0.66,goal=yaw,spin=0,last=-1;
var sp=Math.sin(pitch),cp=Math.cos(pitch);
var PH=[[0,'01 · Terreno'],[0.08,'02 · Cimentación'],[0.22,'03 · Estructura'],[0.5,'04 · Forjado'],[0.63,'05 · Cerramientos'],[0.8,'06 · Cubierta'],[0.97,'Obra terminada']];
/* x, y, z, ancho, fondo, alto, inicio, fin, modo (0 baja, 1 crece), material (0 macizo, 1 vidrio), nivel */
var B=[
[-8,-4,0,14,8,0.4,0.08,0.22,0,0,1],
[-7,3,0.4,0.36,0.36,3,0.22,0.34,1,0,2],
[-1,3,0.4,0.36,0.36,3,0.24,0.36,1,0,2],
[5,3,0.4,0.36,0.36,3,0.26,0.38,1,0,2],
[5,-3.4,0.4,0.36,0.36,3,0.28,0.4,1,0,2],
[-7.6,-3.6,0.4,4,3.4,3,0.3,0.44,1,0,2],
[-3.6,-3.6,0.4,8.6,0.3,3,0.34,0.46,1,0,2],
[-3.2,-0.4,0.4,7.6,3.2,3,0.4,0.52,1,1,2],
[-8.6,-4.4,3.4,15,9.4,0.35,0.5,0.63,0,0,3],
[-6,-3,3.75,7.6,5.2,2.8,0.63,0.76,1,0,4],
[1.6,-3,3.75,3.6,5.2,2.8,0.68,0.8,1,1,4],
[-6.6,-3.6,6.55,12.6,6.6,0.3,0.8,0.93,0,0,5],
[-4.6,-2,6.85,1.6,1.6,0.5,0.91,0.99,1,1,6]
];
var gG=el('g',{fill:'none','stroke-linejoin':'round'});
var gB=el('g',{'stroke-linejoin':'round'});
svg.appendChild(gG);svg.appendChild(gB);
var plot=el('polygon',{stroke:'rgba(243,238,231,.42)','stroke-width':'1'});
var grid=el('path',{stroke:'rgba(243,238,231,.11)','stroke-width':'1'});
var pool=el('polygon',{stroke:'#C8BD64','stroke-width':'1',fill:'rgba(200,189,100,.14)'});
var walk=el('path',{stroke:'rgba(243,238,231,.34)','stroke-width':'1'});
gG.appendChild(grid);gG.appendChild(plot);gG.appendChild(pool);gG.appendChild(walk);
var gT=el('g',{fill:'none'});
var trees=[[-9,-5.4,2.6,0.95,0],[-6.8,-6.1,1.9,0.65,0],[8.6,-5.6,2.4,0.9,0]].map(function(q){
var host=q[4]?gT:gG;
var t={x:q[0],y:q[1],h:q[2],r:q[3],sh:el('ellipse',{stroke:'rgba(243,238,231,.22)','stroke-width':'1'}),tr:el('path',{stroke:'rgba(243,238,231,.5)','stroke-width':'1'}),cr:el('circle',{stroke:'#C8BD64','stroke-width':'1',fill:'rgba(38,37,35,.72)'})};
host.appendChild(t.sh);host.appendChild(t.tr);host.appendChild(t.cr);
return t;
});
var nodes=B.map(function(b){
var g=el('g',{});
var glass=b[9]===1;
var a=el('polygon',{});var c=el('polygon',{});var t=el('polygon',{});
[a,c,t].forEach(function(n){
n.setAttribute('stroke',glass?'#C8BD64':'#262523');
n.setAttribute('stroke-width',glass?'1':'0.9');
g.appendChild(n);
});
if(glass){a.setAttribute('fill','rgba(200,189,100,.2)');c.setAttribute('fill','rgba(200,189,100,.3)');t.setAttribute('fill','rgba(200,189,100,.12)');}
else{t.setAttribute('fill','#F3EEE7');}
gB.appendChild(g);
return {b:b,g:g,a:a,c:c,t:t,glass:glass,depth:0};
});
svg.appendChild(gT);
function pr(x,y,z){
var c=Math.cos(yaw),s=Math.sin(yaw);
var xr=x*c-y*s,yr=x*s+y*c;
return [W/2+xr*S,CY+(yr*sp-z*cp)*S];
}
function pts(arr){return arr.map(function(q){return q[0].toFixed(1)+','+q[1].toFixed(1);}).join(' ');}
function ground(){
var c=[[-10,-7],[10,-7],[10,7],[-10,7]].map(function(q){return pr(q[0],q[1],0);});
plot.setAttribute('points',pts(c));
var d='',i,a,b;
function seg(m,n){return 'M'+m[0].toFixed(1)+' '+m[1].toFixed(1)+'L'+n[0].toFixed(1)+' '+n[1].toFixed(1);}
for(i=-8;i<=8;i+=2){d+=seg(pr(i,-7,0),pr(i,7,0));}
for(i=-5;i<=5;i+=2){d+=seg(pr(-10,i,0),pr(10,i,0));}
grid.setAttribute('d',d);
pool.setAttribute('points',pts([[7,0.6],[9.4,0.6],[9.4,6],[7,6]].map(function(q){return pr(q[0],q[1],0);})));
walk.setAttribute('d',seg(pr(-2.4,4,0),pr(-2.4,7,0))+seg(pr(-0.6,4,0),pr(-0.6,7,0)));
trees.forEach(function(t){
var base=pr(t.x,t.y,0),top=pr(t.x,t.y,t.h);
t.sh.setAttribute('cx',base[0].toFixed(1));t.sh.setAttribute('cy',base[1].toFixed(1));
t.sh.setAttribute('rx',(t.r*S).toFixed(1));t.sh.setAttribute('ry',(t.r*S*sp).toFixed(1));
t.tr.setAttribute('d',seg(base,top));
t.cr.setAttribute('cx',top[0].toFixed(1));t.cr.setAttribute('cy',top[1].toFixed(1));t.cr.setAttribute('r',(t.r*S).toFixed(1));
});
}
function order(){
var c=Math.cos(yaw),s=Math.sin(yaw);
nodes.forEach(function(n){var b=n.b;n.depth=(b[0]+b[3]/2)*s+(b[1]+b[4]/2)*c;});
nodes.slice().sort(function(m,n){return (m.b[10]-n.b[10])||(m.depth-n.depth);}).forEach(function(n){gB.appendChild(n.g);});
}
function draw(p){
var c=Math.cos(yaw),s=Math.sin(yaw);
gG.setAttribute('opacity',span(p,0,0.08).toFixed(3));
gT.setAttribute('opacity',span(p,0.02,0.12).toFixed(3));
nodes.forEach(function(n){
var b=n.b,e=span(p,b[6],b[7]);
if(e<=0){n.g.setAttribute('display','none');return;}
n.g.removeAttribute('display');
var x0=b[0],y0=b[1],x1=b[0]+b[3],y1=b[1]+b[4];
var z0=b[2]+(b[8]===0?(1-e)*5:0);
var z1=z0+(b[8]===1?b[5]*e:b[5]);
n.g.setAttribute('opacity',Math.min(1,e*1.5).toFixed(3));
/* cara lateral visible en x */
var fx=(s>0)?x1:x0;
var fy=(c>0)?y1:y0;
n.a.setAttribute('points',pts([pr(fx,y0,z0),pr(fx,y1,z0),pr(fx,y1,z1),pr(fx,y0,z1)]));
n.c.setAttribute('points',pts([pr(x0,fy,z0),pr(x1,fy,z0),pr(x1,fy,z1),pr(x0,fy,z1)]));
n.t.setAttribute('points',pts([pr(x0,y0,z1),pr(x1,y0,z1),pr(x1,y1,z1),pr(x0,y1,z1)]));
if(!n.glass){
var la=Math.abs(s),lc=Math.abs(c);
n.a.setAttribute('fill',la>lc?'#DDD6CA':'#BDB5A7');
n.c.setAttribute('fill',la>lc?'#BDB5A7':'#DDD6CA');
}
});
if(label){label.textContent=phaseOf(PH,p);}
}
function render(p){last=p;draw(p);}
var state=control(root,render);
function settle(){
spin=0;
var d=goal-yaw;
if(Math.abs(d)<0.002){yaw=goal;}else{yaw+=d*0.16;}
ground();order();draw(last<0?state.p:last);
if(yaw!==goal){spin=window.requestAnimationFrame(settle);}
}
function turn(v){goal=clamp(v,-1.25,-0.2);if(mq.matches){yaw=goal;}if(!spin){spin=window.requestAnimationFrame(settle);}}
var drag=null;
stage.addEventListener('pointerdown',function(ev){
if(ev.pointerType==='mouse'&&ev.button!==0){return;}
drag={x:ev.clientX,y:ev.clientY,g:goal,on:false};
});
stage.addEventListener('pointermove',function(ev){
if(!drag){return;}
var dx=ev.clientX-drag.x,dy=ev.clientY-drag.y;
if(!drag.on){
if(Math.abs(dx)<6||Math.abs(dx)<Math.abs(dy)){return;}
drag.on=true;stage.classList.add('is-drag');
try{stage.setPointerCapture(ev.pointerId);}catch(err){}
}
turn(drag.g+dx*0.006);
});
function end(){drag=null;stage.classList.remove('is-drag');}
stage.addEventListener('pointerup',end);
stage.addEventListener('pointercancel',end);
stage.addEventListener('pointerleave',function(){if(drag&&!drag.on){drag=null;}});
ground();order();draw(state.p);
}

function demo2d(root){
var svg=root.querySelector('svg');
var label=root.querySelector('[data-arq-phase]');
if(!svg){return;}
var PH=[[0,'01 · Trazado'],[0.18,'02 · Tabiquería'],[0.38,'03 · Patio'],[0.5,'04 · Carpintería'],[0.64,'05 · Mobiliario'],[0.78,'06 · Cotas'],[0.97,'Plano terminado']];
function read(n,k){var v=(n.getAttribute(k)||'0,1').split(',');return [parseFloat(v[0]),parseFloat(v[1])];}
var lines=Array.prototype.slice.call(svg.querySelectorAll('[data-d]')).map(function(n){
n.style.strokeDasharray='1';
return {n:n,w:read(n,'data-d')};
});
var fades=Array.prototype.slice.call(svg.querySelectorAll('[data-f]')).map(function(n){return {n:n,w:read(n,'data-f')};});
control(root,function(p){
lines.forEach(function(o){
var e=span(p,o.w[0],o.w[1]);
o.n.style.strokeDashoffset=String(1-e);
o.n.style.visibility=e<=0?'hidden':'visible';
});
fades.forEach(function(o){o.n.setAttribute('fill-opacity',span(p,o.w[0],o.w[1]).toFixed(3));});
if(label){label.textContent=phaseOf(PH,p);}
});
}

function mount(root){
if(!root||done.has(root)){return;}
done.add(root);
var kind=root.getAttribute('data-arq');
if(kind==='3d'){demo3d(root);}else if(kind==='2d'){demo2d(root);}
}
function scan(){Array.prototype.slice.call(document.querySelectorAll('[data-ae-arq] [data-arq]')).forEach(mount);}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',scan);}else{scan();}
if(window.jQuery){
window.jQuery(window).on('elementor/frontend/init',function(){
if(window.elementorFrontend&&window.elementorFrontend.hooks){
window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
}
});
}
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Diseño web para estudios de arquitectura"
    },
    {
     "@type": "Thing",
     "name": "Diseño web para interiorismo"
    },
    {
     "@type": "Thing",
     "name": "Diseño web editorial"
    }
   ],
   "mentions": [
    {
     "@type": "CreativeWork",
     "name": "Ibiza Sovereign · Diseño web",
     "url": "https://a-estudio.co/ibiza-sovereign/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/#faq",
   "inLanguage": "es-ES",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Qué debe tener la web de un estudio de arquitectura?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Una portada que diga qué hace el estudio y para quién, un archivo de obras con filtros por tipología, fichas de proyecto con encargo, datos, planos, fotografías y créditos, una página del estudio con equipo y reconocimientos, y un contacto que distinga el tipo de encargo."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuántos proyectos conviene mostrar en la web de un estudio?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Entre seis y doce obras destacadas con ficha completa, y el resto en un archivo más ligero. Mostrar todos los proyectos con el mismo peso hace más difícil ver los que mejor representan al estudio."
     }
    },
    {
     "@type": "Question",
     "name": "¿En qué se diferencia la web de un estudio de interiorismo?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Necesita más imagen de detalle y de material, casos de antes y después en reformas, recorridos separados para residencial y contract, y una explicación clara del proceso y de lo que incluye el servicio."
     }
    },
    {
     "@type": "Question",
     "name": "¿Una web de arquitectura con muchas imágenes puede cargar rápido?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. Con formatos de imagen actuales, tamaños adaptados a cada pantalla y carga progresiva, las fotografías pueden mostrarse a gran tamaño sin penalizar la velocidad ni el posicionamiento."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cómo puede aparecer un estudio de arquitectura en ChatGPT o en Gemini?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No hay garantía, pero ayuda que cada obra tenga texto real con tipología, ubicación, año y descripción, que la web use datos estructurados y que el estudio aparezca citado en medios y directorios del sector."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuánto cuesta la web de un estudio de arquitectura?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Depende del número de obras con ficha desarrollada, de los idiomas y del nivel de diseño y animación. En A-ESTUDIO una web esencial parte de 2.300 € y un proyecto extenso puede superar los 30.000 €."
     }
    }
   ]
  }
 ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/">Diseño web premium para estudios de arquitectura e interiorismo: cómo presentar una obra</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Imágenes de joyería con IA: tamaño, material y brillo fieles a la pieza real</title>
		<link>https://a-estudio.co/fotografia-joyeria-ia/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Wed, 07 Oct 2026 10:48:47 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=30444</guid>

					<description><![CDATA[<p>Cómo crear imágenes de joyería con IA a partir de una foto real de la pieza: qué no se toca, qué decide la marca y ocho comprobaciones antes de publicar.</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/fotografia-joyeria-ia/">Imágenes de joyería con IA: tamaño, material y brillo fieles a la pieza real</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-30444">.elementor-30444 .elementor-element.elementor-element-d04ae5c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="30444" class="elementor elementor-30444" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-d04ae5c e-con-full e-flex e-con e-parent" data-id="d04ae5c" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-77941d0 elementor-widget elementor-widget-html" data-id="77941d0" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · IMÁGENES DE JOYERÍA CON IA
Widget HTML / Elementor Pro. Misma maqueta que /diseno-web-editorial/ (aeArt1).
URL: https://a-estudio.co/fotografia-joyeria-ia/
RANK MATH · Focus keyword: fotografía de joyería con IA
Schema: este bloque emite FAQPage. BlogPosting y BreadcrumbList los emite Rank Math.
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-body .art-fig{max-width:520px}
#aeArt1 .art-body .art-fig img{max-height:none}
#aeArt1 .art-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 28px}
#aeArt1 .art-pair .art-fig{margin:0}
#aeArt1 .art-pair .art-fig img{max-height:none}
#aeArt1 .art-hero-fig.art-hero-fig--pair{max-width:980px;margin-left:auto;margin-right:auto}
#aeArt1 .art-hero-fig.art-hero-fig--pair .art-img{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none}
#aeArt1 .art-hero-fig.art-hero-fig--pair .art-img img{aspect-ratio:4/5;height:auto;width:100%;object-fit:cover}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Joyería · IA</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Imágenes de joyería con IA:</span></span>
<span class="art-line"><span><em>tamaño, material y brillo</em></span></span>
<span class="art-line"><span><em>fieles a la pieza real.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>Una imagen de joyería creada con IA debe validarse frente al producto real: forma, medidas, piedras, metal y acabado.</strong> La IA puede crear la modelo, la piel, la luz y el ambiente. La fotografía real es el punto de partida, pero no garantiza por sí sola la fidelidad del resultado. Cada imagen requiere revisión y, cuando haga falta, corrección o descarte.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-08">Actualizado · 8 octubre 2026</time> · 8 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig art-hero-fig--pair" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-lapislazuli-foto-real-molde.webp" width="1080" height="1350" loading="eager" decoding="async" alt="Fotografía real de un conjunto de piercings de oro y lapislázuli sobre un molde de oreja blanco">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-lapislazuli-oreja-modelo.webp" width="1080" height="1350" loading="eager" decoding="async" alt="Imagen creada con IA: el mismo conjunto de oro y lapislázuli sobre la oreja de una modelo, con tamaño y posición fieles a las piezas reales">
</div>
<figcaption class="art-micro">
<span>Izquierda · fotografía real sobre molde</span>
<span>Derecha · imagen creada con IA a partir de esa foto</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#que-es">Qué es y qué no es</a></li>
<li><a href="#antes-despues">De la foto real a la imagen</a></li>
<li><a href="#fidelidad">Lo que no se toca</a></li>
<li><a href="#marca">Lo que decide la marca</a></li>
<li><a href="#pieza-sola">La pieza sola</a></li>
<li><a href="#comprobar">8 comprobaciones</a></li>
<li><a href="#donde">Dónde usarla y dónde no</a></li>
<li><a href="#limites">Qué gana una marca</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>Una joya es pequeña, refleja todo lo que tiene alrededor y se juzga de cerca. Por eso es uno de los productos más difíciles de fotografiar y, también, uno de los más fáciles de falsear sin querer con inteligencia artificial: una piedra de más, un engaste que cambia, un pendiente que de pronto ocupa media oreja. La imagen puede ser preciosa y, aun así, enseñar una pieza que no existe.</p>
<section id="que-es" aria-labelledby="h-que">
<span class="art-kicker art-micro">01</span>
<h2 id="h-que">
<span class="art-line"><span>Qué es una imagen de joyería con IA</span></span>
<span class="art-line"><span><em>y qué no debería ser.</em></span></span>
</h2>
<p data-rv>Hay dos maneras de hacer fotografía de joyería con IA. La primera consiste en describir la pieza con palabras y dejar que la herramienta la dibuje. El resultado se parece a la joya, pero no lo es. Para una marca que vende piezas concretas, esa imagen no sirve.</p>
<p data-rv>La segunda parte de una <strong>fotografía real de la pieza</strong>: sobre un molde, sobre un expositor o suelta en una mesa. Esa foto es la referencia. El objetivo es crear el entorno —modelo, piel, luz y fondo— conservando la identidad de la pieza. La generación puede alterar detalles incluso con referencia; por eso el resultado debe contrastarse con fotografías y medidas reales. Es la forma en que trabajamos en A-ESTUDIO y la única que tratamos en este artículo.</p>
<div class="art-table" data-table role="region" aria-label="Qué genera la IA y qué procede de la fotografía real" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Elemento</span></th>
<th scope="col">Procede de la foto real</th>
<th scope="col">Lo genera la IA</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">La pieza</th><td>Forma, engastes, número y talla de las piedras.</td><td>No debe inventar detalles; hay que comprobarlos.</td></tr>
<tr><th scope="row">Color y material</th><td>Tono del oro, color de referencia de cada piedra.</td><td>Reflejos y luz que deben revisarse frente al material real.</td></tr>
<tr><th scope="row">Tamaño</th><td>Las medidas reales de la pieza.</td><td>Una representación cuya escala debe validarse con medidas.</td></tr>
<tr><th scope="row">Modelo</th><td>—</td><td>Rostro, oreja, piel, cabello y maquillaje.</td></tr>
<tr><th scope="row">Escena</th><td>—</td><td>Luz, fondo y atmósfera.</td></tr>
</tbody>
</table>
</div>
</section>
<section id="antes-despues" aria-labelledby="h-ant">
<span class="art-kicker art-micro">02</span>
<h2 id="h-ant">
<span class="art-line"><span>De la foto de taller</span></span>
<span class="art-line"><span><em>a la imagen de campaña.</em></span></span>
</h2>
<p data-rv>El punto de partida suele ser modesto: las piezas colocadas en un molde de silicona, con la distribución que llevarían en una oreja. Es una foto útil para un catálogo interno, pero no cuenta cómo queda la joya puesta.</p>
<div class="art-pair" data-rv>
<figure class="art-fig">
<div class="art-img"><img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-amatistas-foto-real-molde.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Fotografía real de un conjunto de piercings con amatistas y diamantes sobre un molde de oreja blanco"></div>
<figcaption class="art-micro"><span>Foto real · molde</span></figcaption>
</figure>
<figure class="art-fig">
<div class="art-img"><img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-amatistas-oreja-modelo.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA: el mismo conjunto de amatistas y diamantes sobre la oreja de una modelo con luz cálida"></div>
<figcaption class="art-micro"><span>Imagen con IA · modelo</span></figcaption>
</figure>
</div>
<p data-rv>La comparación permite revisar posición, proporción, engastes y color: la amatista central, la cadena de bolitas y la flor con sus tres hilos. El entorno cambia; la representación del producto debe contrastarse con la foto original y sus medidas. Una oreja generada, por sí sola, no demuestra la escala real.</p>
</section>
</article>
</div>
<section class="art-case" id="fidelidad" aria-labelledby="h-case">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">03 · El método</span>
<h2 id="h-case">
<span class="art-line"><span>La pieza manda:</span></span>
<span class="art-line"><span><em>cuatro aspectos que se validan.</em></span></span>
</h2>
<p data-rv>La revisión compara la imagen con fotografías nítidas, medidas y características del producto. Si se detecta una discrepancia, se corrige —mediante retoque o composición cuando sea necesario— o se descarta la imagen. Si un detalle no puede verificarse, no se presenta como reproducción exacta.</p>
<dl class="art-facts" data-rv>
<div><dt class="art-micro">Punto de partida</dt><dd>Foto real de la pieza</dd></div>
<div><dt class="art-micro">Se genera</dt><dd>Modelo, piel, luz y escena</dd></div>
<div><dt class="art-micro">No se altera</dt><dd>Tamaño, piedras y metal</dd></div>
<div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
</dl>
</div>
<ol class="art-decisions">
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">La escala, comprobada.</p><div><h3>La escala sobre el cuerpo</h3><p>Es lo primero que falla y lo que más importa. Un piercing de seis milímetros no puede parecer de doce. La pieza debe ocupar en la oreja, en la nariz o en la mano el espacio que ocuparía la real, y debe acompañarse de las medidas del producto y de fotografías reales que permitan contrastarla.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">Por una cara y por la otra.</p><div><h3>La forma, completa</h3><p>Número de piedras, tipo de engaste, grosor del aro, cierre, eslabones de la cadena. Se revisa de frente y también en el ángulo que muestra la imagen, porque al girar la pieza es donde la IA tiende a simplificar o a añadir.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">El mismo azul. El mismo verde.</p><div><h3>El color de cada piedra</h3><p>Un lapislázuli no es un zafiro y una malaquita no es una esmeralda. La luz de la escena puede cambiar los reflejos, pero no el color de la piedra ni sus vetas. Se compara con la foto original, piedra a piedra.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">Oro que parece oro.</p><div><h3>El material y su brillo</h3><p>Oro amarillo, oro rosa y oro blanco reflejan la luz de forma distinta, igual que un diamante y un ópalo. El brillo debe corresponder al material y a la luz de la escena. Un destello solo tiene sentido cuando la luz de la escena lo explica.</p></div></li>
</ol>
<blockquote class="art-pull" data-pull>
<p><span>La modelo</span> <span>se puede crear.</span> <em>La joya, no.</em></p>
</blockquote>
<p class="art-case-foot" data-rv>Es el mismo principio que aplicamos en el <a href="https://a-estudio.co/diseno-web-joyerias/">diseño web para joyerías</a>: la pieza necesita protagonismo, pero también verdad.</p>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="marca" aria-labelledby="h-mar">
<span class="art-kicker art-micro">04</span>
<h2 id="h-mar">
<span class="art-line"><span>Lo que sí decide la marca:</span></span>
<span class="art-line"><span><em>piel, cabello, maquillaje y luz.</em></span></span>
</h2>
<p data-rv>Con la pieza protegida, todo lo que la rodea se dirige igual que en una sesión de fotos. La diferencia es que cada decisión se toma sin depender de un casting, un estudio o una fecha.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>La piel.</strong> Poro visible, pecas, vello fino, brillo natural. Una piel demasiado lisa es lo primero que hace desconfiar de una imagen.</li>
<li data-rv><strong>El cabello.</strong> Mechones sueltos, pelo mojado o recogido, y su relación con la pieza: que la acompañe sin taparla.</li>
<li data-rv><strong>El maquillaje.</strong> Limpio y elegante para una marca clásica; más marcado o más <em>underground</em> para una marca joven.</li>
<li data-rv><strong>La luz.</strong> Estudio oscuro, sol de tarde o flash directo. Cada una cuenta una marca distinta con la misma joya.</li>
</ul>
<div class="art-pair" data-rv>
<figure class="art-fig">
<div class="art-img"><img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-septum-piedras-detalle.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA: primer plano de un septum de oro con piedras de colores, con poro y pecas visibles en la piel"></div>
<figcaption class="art-micro"><span>Detalle · la pieza</span></figcaption>
</figure>
<figure class="art-fig">
<div class="art-img"><img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-septum-piedras-retrato.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA: retrato frontal de una modelo con el mismo septum de piedras de colores, que muestra su tamaño real en el rostro"></div>
<figcaption class="art-micro"><span>Retrato · la escala</span></figcaption>
</figure>
</div>
<p data-rv>La misma pieza a dos distancias. De cerca se leen las piedras y los engastes; en el retrato se entiende cuánto ocupa en un rostro. Una ficha de joyería necesita las dos.</p>
<p data-rv>No todas las marcas buscan realismo. Algunas piden a propósito una estética más artificial: pieles muy pulidas, rasgos andróginos, una belleza que no pretende pasar por fotografía. Es una dirección tan válida como la naturalista, siempre que sea una elección y no un descuido. Lo que no cambia en ningún caso es la joya.</p>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-campana-septum-dorado.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen de campaña creada con IA: modelo de piel brillante y cabello mojado con un septum dorado, con estética editorial">
</div>
<figcaption class="art-micro">
<span>Imagen de campaña</span>
<span>Otra marca, otra piel, otra luz. La pieza sigue siendo la referencia.</span>
</figcaption>
</figure>
</section>
<section id="pieza-sola" aria-labelledby="h-pie">
<span class="art-kicker art-micro">05</span>
<h2 id="h-pie">
<span class="art-line"><span>La pieza sola:</span></span>
<span class="art-line"><span><em>de una foto corriente a un bodegón.</em></span></span>
</h2>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-pieza-diamantes-oro.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA a partir de una foto real: pieza de oro amarillo con ocho diamantes sobre una superficie negra con reflejo">
</div>
<figcaption class="art-micro">
<span>Pieza sola</span>
<span>Creada a partir de una fotografía normal de la joya.</span>
</figcaption>
</figure>
<p data-rv>El mismo método sirve sin modelo. A partir de una foto sencilla de la pieza se construye un bodegón: fondo, superficie, luz dirigida y reflejo. Aquí la exigencia es todavía mayor, porque no hay nada más que mirar. Cada garra, cada faceta y cada punto de luz se comparan con la original.</p>
<p data-rv>El bodegón también puede contar una colección entera con un solo objeto: una fruta, una textura, un color que acompaña a la pieza sin competir con ella.</p>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-bodegon-pina-diamantes.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA a partir de una foto real: dos piercings de diamantes apoyados sobre una cuña de piña, con fondo negro">
</div>
<figcaption class="art-micro">
<span>Bodegón de campaña</span>
<span>Una escena que no hubo que montar. Las piezas, las de verdad.</span>
</figcaption>
</figure>
<p data-rv>Las piedras con vida propia, como el ópalo, son la prueba más dura. Sus colores cambian con el ángulo y la IA tiende a convertirlos en un blanco lechoso o en un arcoíris exagerado.</p>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-opalos-oreja-modelo.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA: oreja con piercings de oro, ópalos, diamantes y piedras azules talla baguette">
</div>
<figcaption class="art-micro">
<span>Ópalos y baguettes</span>
<span>Dos tallas y dos comportamientos de la luz en una misma imagen.</span>
</figcaption>
</figure>
</section>
<section id="comprobar" aria-labelledby="h-com" data-signals>
<span class="art-kicker art-micro">06</span>
<h2 id="h-com">
<span class="art-line"><span>8 comprobaciones</span></span>
<span class="art-line"><span><em>antes de publicar una imagen.</em></span></span>
</h2>
<p class="art-note" data-rv>Pon la imagen junto a la foto real de la pieza y marca lo que se cumple.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La pieza tiene sobre el cuerpo el tamaño que tendría la real.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El número de piedras coincide.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La talla y el engaste de cada piedra son los mismos.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El color de las piedras es el de la original, no uno parecido.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El tono del metal es el correcto: amarillo, rosa o blanco.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La pieza se apoya en la piel con lógica: tiene sombra, peso y punto de sujeción.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>No hay destellos ni brillos añadidos que la luz de la escena no explique.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La piel, el cabello y el maquillaje corresponden a la marca.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>Las siete primeras hablan de la pieza. <strong>Si falla una, la imagen no se publica.</strong></p>
</section>
<section id="donde" aria-labelledby="h-don">
<span class="art-kicker art-micro">07</span>
<h2 id="h-don">
<span class="art-line"><span>Dónde usar estas imágenes</span></span>
<span class="art-line"><span><em>y dónde no.</em></span></span>
</h2>
<ul class="art-list">
<li data-rv><strong>Campaña, portada y redes sociales.</strong> Es su lugar natural: transmiten el universo de la marca y enseñan la pieza puesta.</li>
<li data-rv><strong>Colecciones y páginas editoriales de la web.</strong> Dan contexto y escala a un conjunto de piezas antes de entrar en cada ficha.</li>
<li data-rv><strong>Ficha de producto.</strong> Como imagen de «cómo queda puesta», junto a la fotografía real de la pieza. La foto real no desaparece: es la que responde de lo que se compra.</li>
<li data-rv><strong>Piezas únicas o a medida.</strong> Con prudencia. Si la joya todavía no existe, la imagen es una propuesta y debe presentarse como tal.</li>
</ul>
<figure class="art-fig" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/joyeria-ia-pieza-oro-puesta-y-sola.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Imagen creada con IA: una misma pieza de oro con piedra talla pera y cadenas, arriba puesta en la oreja y abajo sola sobre fondo claro">
</div>
<figcaption class="art-micro">
<span>Puesta y sola</span>
<span>Las dos vistas que pide una ficha: la escala arriba, el detalle abajo.</span>
</figcaption>
</figure>
<aside class="art-aside" data-rv>
<span class="art-micro">Una regla sencilla</span>
<p>Quien compra tiene que recibir lo que ha visto. Si la imagen cumple eso, es una buena imagen de producto, se haya hecho con una cámara o con IA. <em>Si no lo cumple, no lo es en ninguno de los dos casos.</em></p>
</aside>
</section>
<section id="limites" aria-labelledby="h-lim">
<span class="art-kicker art-micro">08</span>
<h2 id="h-lim">
<span class="art-line"><span>Qué gana una marca de joyería</span></span>
<span class="art-line"><span><em>y qué sigue necesitando.</em></span></span>
</h2>
<p data-rv>La ventaja es clara: con una buena foto de cada pieza se puede mostrar una colección entera sobre el cuerpo sin organizar una sesión con modelo para cada lanzamiento. La marca gana rapidez, una imagen coherente entre colecciones y la posibilidad de enseñar sus piezas en pieles, edades y estilos distintos.</p>
<p data-rv>Lo que no desaparece es el trabajo. Hace falta una fotografía de partida nítida, alguien que conozca la pieza para revisarla y una dirección que decida cómo debe verse la marca. La herramienta genera muchas imágenes; elegir la que es fiel y descartar las demás sigue siendo un oficio.</p>
<p data-rv>En A-ESTUDIO lo integramos en el proyecto de marca y web: las imágenes se crean pensando en dónde van a vivir, ya sea la portada, la colección o la ficha. Puedes ver un ecommerce de joyería completo en el caso de <a href="https://a-estudio.co/dlezcano/">DLezcano</a>.</p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">09</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Se pueden hacer fotos de joyería con IA que sean fieles a la pieza?</h3><i aria-hidden="true"></i></summary><div><p>Es posible trabajar con ese objetivo, pero partir de una foto no asegura la fidelidad. Hay que contrastar forma, engastes, piedras y material con referencias reales, validar la escala con medidas y corregir o descartar los resultados que no puedan verificarse.</p></div></details>
<details name="art-faq"><summary><h3>¿Qué se necesita para crear imágenes de joyería con IA?</h3><i aria-hidden="true"></i></summary><div><p>Una foto nítida de cada pieza, sobre un molde, un expositor o suelta, y sus medidas reales. A partir de ahí se define la dirección de la marca: tipo de modelo, piel, maquillaje, luz y ambiente.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuál es el error más frecuente en una imagen de joyería hecha con IA?</h3><i aria-hidden="true"></i></summary><div><p>El tamaño. La pieza aparece más grande o más pequeña de lo que es. Le siguen las piedras de más o de menos, los colores aproximados y los destellos añadidos que la luz de la escena no justifica.</p></div></details>
<details name="art-faq"><summary><h3>¿Puedo usar imágenes con IA en la ficha de producto de mi tienda online?</h3><i aria-hidden="true"></i></summary><div><p>Puede utilizarse como imagen complementaria, identificando su carácter generado cuando corresponda y acompañándola de fotografías reales, medidas y materiales. Si altera el producto o no permite verificar su escala, no debe presentarse como referencia exacta de compra.</p></div></details>
<details name="art-faq"><summary><h3>¿Sustituye la IA a una sesión de fotos con modelo?</h3><i aria-hidden="true"></i></summary><div><p>En muchos casos sí para mostrar la pieza sobre el cuerpo, porque evita organizar una sesión en cada lanzamiento. No sustituye la fotografía real de la pieza, que sigue siendo el punto de partida, ni la dirección que decide cómo debe verse la marca.</p></div></details>
<details name="art-faq"><summary><h3>¿Se nota que una imagen de joyería está hecha con IA?</h3><i aria-hidden="true"></i></summary><div><p>Depende de la dirección. Con piel con poro, cabello creíble y una luz coherente puede resultar muy natural. Algunas marcas prefieren a propósito una estética más artificial. En ambos casos la joya debe ser la real.</p></div></details>
</div>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/diseno-web-joyerias/">Diseño web para joyerías</a>
<a href="https://a-estudio.co/diseno-web-editorial/">Diseño web editorial</a>
<a href="https://a-estudio.co/ia-para-empresas/">IA para empresas</a>
<a href="https://a-estudio.co/diseno-web-marcas-premium/">Diseño web para marcas premium</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Empieza por una foto de la pieza</span>
<h2 id="h-close">
<span class="art-line"><span>Si tus joyas merecen verse</span></span>
<span class="art-line"><span><em>como son, y puestas.</em></span></span>
</h2>
<p data-rv>Cuéntanos qué piezas tienes y cómo quieres que se vea tu marca. Te decimos qué imágenes necesitas y cómo encajan en tu web.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>
<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count === buttons.length){
result.innerHTML='Se cumplen las 8. <strong>La imagen es fiel a la pieza y a la marca.</strong>';
}else{
result.innerHTML='Se cumplen '+count+' de 8. <strong>Revisa lo que falta antes de publicarla.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/fotografia-joyeria-ia/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Fotografía de joyería"
    },
    {
     "@type": "Thing",
     "name": "Inteligencia artificial generativa"
    },
    {
     "@type": "Thing",
     "name": "Fotografía de producto"
    }
   ],
   "mentions": [
    {
     "@type": "CreativeWork",
     "name": "DLezcano · Diseño web y ecommerce",
     "url": "https://a-estudio.co/dlezcano/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/fotografia-joyeria-ia/#faq",
   "inLanguage": "es-ES",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Se pueden hacer fotos de joyería con IA que sean fieles a la pieza?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Es posible trabajar con ese objetivo, pero partir de una foto no asegura la fidelidad. Hay que contrastar forma, engastes, piedras y material con referencias reales, validar la escala con medidas y corregir o descartar los resultados que no puedan verificarse."
     }
    },
    {
     "@type": "Question",
     "name": "¿Qué se necesita para crear imágenes de joyería con IA?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Una foto nítida de cada pieza, sobre un molde, un expositor o suelta, y sus medidas reales. A partir de ahí se define la dirección de la marca: tipo de modelo, piel, maquillaje, luz y ambiente."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuál es el error más frecuente en una imagen de joyería hecha con IA?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "El tamaño. La pieza aparece más grande o más pequeña de lo que es. Le siguen las piedras de más o de menos, los colores aproximados y los destellos añadidos que la luz de la escena no justifica."
     }
    },
    {
     "@type": "Question",
     "name": "¿Puedo usar imágenes con IA en la ficha de producto de mi tienda online?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Puede utilizarse como imagen complementaria, identificando su carácter generado cuando corresponda y acompañándola de fotografías reales, medidas y materiales. Si altera el producto o no permite verificar su escala, no debe presentarse como referencia exacta de compra."
     }
    },
    {
     "@type": "Question",
     "name": "¿Sustituye la IA a una sesión de fotos con modelo?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "En muchos casos sí para mostrar la pieza sobre el cuerpo, porque evita organizar una sesión en cada lanzamiento. No sustituye la fotografía real de la pieza, que sigue siendo el punto de partida, ni la dirección que decide cómo debe verse la marca."
     }
    },
    {
     "@type": "Question",
     "name": "¿Se nota que una imagen de joyería está hecha con IA?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Depende de la dirección. Con piel con poro, cabello creíble y una luz coherente puede resultar muy natural. Algunas marcas prefieren a propósito una estética más artificial. En ambos casos la joya debe ser la real."
     }
    }
   ]
  }
 ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/fotografia-joyeria-ia/">Imágenes de joyería con IA: tamaño, material y brillo fieles a la pieza real</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Cómo comparar propuestas de diseño web para una marca premium</title>
		<link>https://a-estudio.co/comparar-propuestas-diseno-web/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Wed, 07 Oct 2026 09:59:02 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=30442</guid>

					<description><![CDATA[<p>Qué comparar antes de mirar el precio: dirección, contenido, páginas diseñadas una a una, lanzamiento y costes del segundo año. Con tabla, nueve preguntas y señales de alerta.</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web para una marca premium</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-30442">.elementor-30442 .elementor-element.elementor-element-875258a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="30442" class="elementor elementor-30442" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-875258a e-con-full e-flex e-con e-parent" data-id="875258a" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-c38fca0 elementor-widget elementor-widget-html" data-id="c38fca0" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · CÓMO COMPARAR PROPUESTAS DE DISEÑO WEB
Widget HTML / Elementor Pro. Misma maqueta que /diseno-web-editorial/ (aeArt1).
URL: https://a-estudio.co/comparar-propuestas-diseno-web/
RANK MATH · Focus keyword: comparar propuestas de diseño web
Schema: este bloque emite FAQPage. BlogPosting y BreadcrumbList los emite Rank Math.
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-fig.art-fig--wide .art-img{aspect-ratio:16/10}
#aeArt1 .art-fig.art-fig--wide img{max-height:none}
#aeArt1 .art-body section > h3{margin:34px 0 10px}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Diseño web</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Cómo comparar propuestas</span></span>
<span class="art-line"><span><em>de diseño web para</em></span></span>
<span class="art-line"><span><em>una marca premium.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>Para comparar propuestas de diseño web, compara primero el alcance y después la cifra: quién dirige el proyecto, qué contenido incluye, cuántas páginas se diseñan una a una, qué se entrega el día del lanzamiento y qué cuesta mantener la web después.</strong> Dos presupuestos con el mismo precio pueden describir proyectos distintos, y dos precios muy alejados pueden corresponder a trabajos que no son comparables.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-08">Actualizado · 8 octubre 2026</time> · 9 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/nahikari-kareaga-lilium-diseno-web-paginas.webp" width="1440" height="900" loading="eager" decoding="async" alt="Tres páginas de la web de Lilium Aesthetic Studio diseñadas una a una por A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Lilium Aesthetic Studio</span>
<span>Tres páginas, tres composiciones. Eso también es alcance.</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#por-que">Por qué no son comparables</a></li>
<li><a href="#que-comparar">Siete cosas que comparar</a></li>
<li><a href="#tabla">Resumida o completa</a></li>
<li><a href="#preguntas-clave">9 preguntas antes de decidir</a></li>
<li><a href="#a-estudio">Cómo lo planteamos</a></li>
<li><a href="#precio">Cómo leer el precio</a></li>
<li><a href="#alertas">Señales de alerta</a></li>
<li><a href="#sector">Según tu sector</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>Has pedido tres propuestas para la web de tu marca. Una ocupa una página y termina en una cifra. Otra tiene veinte, con fases, entregables y condiciones. La tercera llega con un vídeo y una fecha de caducidad. Las tres dicen «diseño web a medida», y ninguna cuesta lo mismo. Lo natural es ir a la última línea y comparar precios. Es también la forma más fácil de equivocarse.</p>
<section id="por-que" aria-labelledby="h-por">
<span class="art-kicker art-micro">01</span>
<h2 id="h-por">
<span class="art-line"><span>Por qué dos propuestas</span></span>
<span class="art-line"><span><em>no se pueden comparar a primera vista.</em></span></span>
</h2>
<p data-rv>«Diseño web» no es una unidad de medida. Detrás de esas dos palabras caben trabajos muy distintos: adaptar una composición ya existente, o estudiar un negocio, ordenar su contenido, escribirlo, diseñar cada página y desarrollarla. Los dos resultados son una web. No son el mismo proyecto.</p>
<p data-rv>En una <strong>marca premium</strong> la diferencia pesa más, porque la web forma parte de lo que se vende. Quien reserva una suite, pide cita en una clínica o encarga una pieza de joyería decide en gran medida por lo que ve antes de hablar con nadie. Una propuesta para ese tipo de marca debería explicar cómo se va a construir esa confianza, no solo cuántas páginas tendrá el sitio.</p>
<p data-rv>Por eso conviene leer cada propuesta con las mismas preguntas. Cuando todas responden a lo mismo, el precio empieza a tener sentido.</p>
</section>
<section id="que-comparar" aria-labelledby="h-que">
<span class="art-kicker art-micro">02</span>
<h2 id="h-que">
<span class="art-line"><span>Las siete cosas</span></span>
<span class="art-line"><span><em>que conviene comparar.</em></span></span>
</h2>
<p data-rv>Son los puntos donde más se separan dos propuestas de diseño web, y casi nunca aparecen en la cifra final.</p>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Quién dirige y quién ejecuta</h3><p>Pregunta quién toma las decisiones de diseño y quién las lleva a cabo. En algunos estudios la persona que presenta la propuesta dirige el proyecto hasta el final; en otros, lo traspasa a un equipo que no has conocido. Ninguna opción es peor por sí misma, pero deberías saber con quién vas a hablar durante los próximos meses.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>El estudio previo</h3><p>Una propuesta puede empezar directamente en el diseño o dedicar un tiempo a entender el negocio: qué ofrece, a quién, qué explica mal la web actual y cómo se presentan otras marcas del sector. Ese trabajo no se ve en la web terminada, pero decide su estructura. Comprueba si está incluido y qué documento recibirás.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>El contenido: textos e imágenes</h3><p>Es la diferencia que más cambia un presupuesto. «El cliente aporta los textos» significa que alguien de tu equipo tendrá que escribir cada página. Averigua quién redacta, quién edita, si hay dirección de fotografía y qué ocurre si las imágenes que tienes no alcanzan el nivel que la web necesita.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">4</span><div><h3>El diseño: cuántas páginas se piensan una a una</h3><p>«Diseño personalizado» admite muchas lecturas. Pregunta cuántas páginas tendrán una composición propia y cuántas compartirán una misma estructura, si la versión móvil se diseña aparte o se deja al ajuste automático, y cuántas rondas de revisión hay en cada fase.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">5</span><div><h3>El desarrollo y lo que queda a tu nombre</h3><p>Conviene saber con qué tecnología se construye la web, quién es titular del dominio, del alojamiento y de las licencias, y qué pasaría si un día cambias de proveedor. Pregunta también por la velocidad de carga y la accesibilidad: son parte del trabajo, no un extra.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">6</span><div><h3>La visibilidad el día del lanzamiento</h3><p>«SEO incluido» puede ser instalar un plugin o entregar la web con títulos, descripciones, datos estructurados, redirecciones desde la web anterior y contenido preparado para que Google y los asistentes de IA entiendan qué ofrece la marca. Pide que la propuesta diga cuál de las dos cosas es. Lo explicamos en la guía <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a>.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">7</span><div><h3>Lo que ocurre después</h3><p>Una web se publica un día y se usa durante años. Compara qué formación recibirás para actualizarla, si existe un mantenimiento y qué cubre, y cuánto costará tenerla en marcha a partir del segundo año: alojamiento, licencias y soporte.</p></div></li>
</ol>
</section>
<section id="tabla" aria-labelledby="h-tab">
<span class="art-kicker art-micro">03</span>
<h2 id="h-tab">
<span class="art-line"><span>Lo que dice una propuesta resumida</span></span>
<span class="art-line"><span><em>y lo que detalla una completa.</em></span></span>
</h2>
<p data-rv>La misma partida puede escribirse en tres palabras o en un párrafo. Esta tabla sirve para detectar dónde falta información antes de comparar cifras.</p>
<div class="art-table" data-table role="region" aria-label="Diferencias entre una propuesta de diseño web resumida y una completa" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Aspecto</span></th>
<th scope="col">Propuesta resumida</th>
<th scope="col">Propuesta completa</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Dirección</th>
<td>«Nuestro equipo de diseño».</td>
<td>Una persona responsable, con nombre, de principio a fin.</td>
</tr>
<tr>
<th scope="row">Estudio previo</th>
<td>«Reunión inicial».</td>
<td>Revisión de la web actual, del sector y de la estructura de páginas.</td>
</tr>
<tr>
<th scope="row">Contenido</th>
<td>«El cliente aporta textos e imágenes».</td>
<td>Redacción, edición y dirección de imagen definidas, con responsable.</td>
</tr>
<tr>
<th scope="row">Diseño</th>
<td>«Diseño personalizado».</td>
<td>Páginas diseñadas una a una, versión móvil propia y rondas de revisión.</td>
</tr>
<tr>
<th scope="row">Desarrollo</th>
<td>«WordPress».</td>
<td>Tecnología, titularidad de licencias, rendimiento y accesibilidad descritos.</td>
</tr>
<tr>
<th scope="row">Visibilidad</th>
<td>«SEO básico».</td>
<td>Metadatos, datos estructurados, redirecciones y preparación para asistentes de IA.</td>
</tr>
<tr>
<th scope="row">Después</th>
<td>«Soporte».</td>
<td>Formación, mantenimiento opcional y costes a partir del segundo año.</td>
</tr>
</tbody>
</table>
</div>
<p data-rv>Una propuesta breve no es necesariamente peor: hay estudios que trabajan muy bien y escriben poco. Lo que no conviene es dar por incluido lo que no está escrito.</p>
</section>
<section id="preguntas-clave" aria-labelledby="h-pre" data-signals>
<span class="art-kicker art-micro">04</span>
<h2 id="h-pre">
<span class="art-line"><span>9 preguntas que una propuesta</span></span>
<span class="art-line"><span><em>debería responder por escrito.</em></span></span>
</h2>
<p class="art-note" data-rv>Marca las que tu propuesta ya responde. Repite el ejercicio con cada una de las que estés valorando.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Quién dirige el proyecto y quién lo ejecuta, con nombre.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Cuántas páginas se diseñan una a una y cuáles comparten estructura.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Quién escribe los textos y de dónde salen las imágenes.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Cuántas rondas de revisión hay y en qué fases.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Qué se entrega el día del lanzamiento: SEO, redirecciones, analítica y textos legales.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>A nombre de quién quedan el dominio, el alojamiento y las licencias.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Cuánto cuesta mantener la web a partir del segundo año.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Cómo vas a actualizar el contenido y qué formación recibes.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Qué plazo tiene cada fase y qué depende de ti para cumplirlo.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>No des por incluido lo que la propuesta no especifica. <strong>Pregunta antes de comparar cifras.</strong></p>
</section>
</article>
</div>
<section class="art-case" id="a-estudio" aria-labelledby="h-case">
<div class="art-shell art-case-grid">
<div class="art-toc-space" aria-hidden="true"></div>
<div class="art-case-main">
<div class="art-case-head">
<span class="art-micro">05 · En primera persona</span>
<h2 id="h-case">
<span class="art-line"><span>Cómo planteamos una propuesta</span></span>
<span class="art-line"><span><em>en A-ESTUDIO.</em></span></span>
</h2>
<p data-rv>Somos parte interesada, así que lo justo es aplicar las mismas preguntas a nuestro trabajo. A-ESTUDIO es un estudio boutique de dirección de marca y <a href="https://a-estudio.co/diseno-web-premium/">diseño web premium</a> con sede en Madrid y Tenerife. Así se construye una propuesta nuestra.</p>
<dl class="art-facts" data-rv>
<div><dt class="art-micro">Inversión</dt><dd>De 2.300 € a más de 30.000 €</dd></div>
<div><dt class="art-micro">Plazo habitual</dt><dd>De 6 semanas a 3 meses</dd></div>
<div><dt class="art-micro">Sedes</dt><dd>Madrid · Tenerife</dd></div>
<div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
</dl>
</div>
<ol class="art-decisions">
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">Un alcance. Una cifra.</p><div><h3>Un precio cerrado para un proyecto completo</h3><p>La propuesta describe todo lo que se va a hacer y lo valora en conjunto. Así se compara un proyecto con otro, no una línea con otra. La cifra se cierra para ese alcance: si después se añaden páginas, imágenes o artículos, se presupuestan aparte.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">Primero, la web que ya tienes.</p><div><h3>Una revisión antes de proponer</h3><p>Cada propuesta parte de un análisis de la web actual: qué explica bien, qué deja fuera y dónde se detiene el visitante. Lo que se propone responde a lo que se ha encontrado.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">Una sola interlocutora.</p><div><h3>La misma dirección de principio a fin</h3><p>Quien presenta la propuesta dirige la marca, el diseño y el desarrollo. No hay traspaso entre departamentos ni una segunda persona que deba volver a entender el proyecto.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">Google y los asistentes de IA, desde el primer día.</p><div><h3>SEO y GEO de lanzamiento incluidos</h3><p>Metadatos, estructura semántica y datos estructurados se entregan con la web, para que buscadores y asistentes de IA entiendan qué ofrece la marca desde que se publica.</p></div></li>
<li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">05</span><p class="art-spec">Un vídeo de tu propia web.</p><div><h3>Formación para que la web siga viva</h3><p>La entrega incluye una formación grabada sobre tu web y una guía de uso, para que puedas actualizar el contenido sin depender del estudio.</p></div></li>
</ol>
<blockquote class="art-pull" data-pull>
<p><span>Una cifra</span> <span>no describe un proyecto.</span> <em>El alcance, sí.</em></p>
</blockquote>
<p class="art-case-foot" data-rv>Puedes ver el resultado de este proceso en los <a href="https://a-estudio.co/proyectos/">proyectos del estudio</a> y el detalle de cada servicio en <a href="https://a-estudio.co/servicios/">servicios</a>.</p>
</div>
</div>
</section>
<div class="art-shell art-layout art-layout--cont">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<section id="precio" aria-labelledby="h-pri">
<span class="art-kicker art-micro">06</span>
<h2 id="h-pri">
<span class="art-line"><span>Cómo leer el precio</span></span>
<span class="art-line"><span><em>cuando ya conoces el alcance.</em></span></span>
</h2>
<figure class="art-fig art-fig--wide" data-clip>
<div class="art-img">
<img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/coco-salon-web-home-desktop.webp" width="1440" height="900" loading="lazy" decoding="async" alt="Web de Coco Salón en un portátil: diseño web a medida por A-ESTUDIO">
</div>
<figcaption class="art-micro">
<span>Coco Salón</span>
<span>Lo que se ve en pantalla es la última fase de la propuesta.</span>
</figcaption>
</figure>
<p data-rv>Con el alcance sobre la mesa, la diferencia de precio suele explicarse por cuatro factores: las horas de dirección que hay detrás, el contenido que se incluye, el número de páginas que se diseñan de forma individual y el nivel de ejecución, animación y motion. Una web de seis páginas con textos escritos y fotografía dirigida no es el mismo encargo que una de seis páginas montada con el material que ya existe.</p>
<p data-rv>Por eso el abanico es tan amplio. En A-ESTUDIO, una web básica, de alcance reducido y pocas páginas, parte de 2.300 €. Los proyectos con dirección creativa, animaciones a medida, transiciones e interacciones vinculadas al concepto de marca requieren otro alcance y presupuesto. La inversión se define según la experiencia que se diseña, el contenido y la complejidad de su desarrollo. Un proyecto extenso, con muchas páginas, animación a medida y contenido e imagen creados para la marca, puede superar los 30.000 €. Entre un extremo y otro no cambia el cuidado del trabajo: cambia cuánto hay que hacer. Los rangos habituales del mercado están en <a href="https://a-estudio.co/cuanto-cuesta-una-pagina-web-en-2026/">cuánto cuesta una página web en 2026</a>.</p>
<h3>¿Precio cerrado o presupuesto desglosado?</h3>
<p data-rv>Las dos fórmulas son válidas si el alcance está bien descrito. El desglose por partidas da sensación de control, pero invita a quitar piezas que sostienen a las demás: una web sin los textos previstos o sin el estudio previo deja de ser el proyecto que se propuso. El precio cerrado obliga al estudio a responder del conjunto, siempre para el alcance acordado: lo que se añada después —más páginas, más imágenes, más artículos— se valora aparte. En ambos casos, lo que debes poder leer con detalle es qué incluye.</p>
<p data-rv>Suma siempre el segundo año. Alojamiento, licencias y mantenimiento pueden convertir la propuesta más baja en la más cara a tres años vista. La comparación entre <a href="https://a-estudio.co/diseno-web-a-medida-vs-plantilla/">diseño web a medida o plantilla</a> desarrolla ese cálculo.</p>
<aside class="art-aside" data-rv>
<span class="art-micro">Cuándo la propuesta más económica es la adecuada</span>
<p>Si el negocio está empezando, la oferta todavía cambia cada pocos meses o solo necesitas estar localizable, una web sencilla es la decisión correcta. El trabajo a medida tiene sentido cuando la web participa en la venta, en la reputación o en el tipo de cliente que llega. <em>Elegir menos también es una decisión de marca.</em></p>
</aside>
</section>
<section id="alertas" aria-labelledby="h-ale">
<span class="art-kicker art-micro">07</span>
<h2 id="h-ale">
<span class="art-line"><span>Señales de alerta</span></span>
<span class="art-line"><span><em>en una propuesta de diseño web.</em></span></span>
</h2>
<p data-rv>Ninguna descarta a un proveedor por sí sola. Todas justifican una pregunta antes de firmar.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Hay precio, pero no alcance.</strong> Una cifra sin lista de páginas, fases y entregables no se puede comparar con nada.</li>
<li data-rv><strong>Nadie te ha preguntado por tu negocio.</strong> Si la propuesta llega sin una conversación previa, es la misma que recibiría cualquier otra empresa.</li>
<li data-rv><strong>El plazo es muy corto y no tiene fases.</strong> Una web a medida necesita tiempo para el contenido y las revisiones; desconfía de una fecha sin calendario.</li>
<li data-rv><strong>El portfolio no incluye marcas de tu nivel.</strong> Busca proyectos con un cliente parecido al tuyo, no solo webs agradables.</li>
<li data-rv><strong>«SEO incluido» sin más explicación.</strong> Pide qué se entrega exactamente y qué no.</li>
<li data-rv><strong>No se menciona el móvil.</strong> El peso de las visitas desde el teléfono varía según el negocio; el diseño móvil debería figurar como trabajo propio.</li>
<li data-rv><strong>No queda claro qué es tuyo.</strong> Dominio, alojamiento, licencias y accesos deben tener titular y condiciones por escrito.</li>
</ul>
</section>
<section id="sector" aria-labelledby="h-sec">
<span class="art-kicker art-micro">08</span>
<h2 id="h-sec">
<span class="art-line"><span>Qué mirar además</span></span>
<span class="art-line"><span><em>según tu sector.</em></span></span>
</h2>
<p data-rv>Cada sector tiene una parte del proyecto que casi nunca se presupuesta bien. Es la primera que conviene buscar en la propuesta.</p>
<ul class="art-list">
<li data-rv><strong>Clínicas y centros médicos.</strong> Quién redacta y revisa los textos de tratamientos, cómo se presentan los casos reales y cómo se integra la petición de cita. <a href="https://a-estudio.co/clinicas/">Diseño web para clínicas</a></li>
<li data-rv><strong>Hoteles, resorts y hospitality.</strong> Integración con el motor de reservas, versiones en varios idiomas, dirección de fotografía y velocidad de carga con imágenes grandes. <a href="https://a-estudio.co/hospitality/">Diseño web para hospitality</a> · <a href="https://a-estudio.co/diseno-web-hoteles-lujo-resorts/">Diseño web para hoteles de lujo y resorts</a></li>
<li data-rv><strong>Estudios de arquitectura e interiorismo.</strong> Cómo se presenta cada obra —planos, fotografía, ficha técnica—, cómo se ordena un archivo con muchos proyectos y quién los cargará en el futuro. <a href="https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/">Diseño web para estudios de arquitectura</a></li>
<li data-rv><strong>Joyería y producto de lujo.</strong> Fotografía de detalle y de escala, estructura de la tienda online y gestión de piezas bajo pedido. <a href="https://a-estudio.co/diseno-web-joyerias/">Diseño web para joyerías</a></li>
</ul>
<p data-rv>Si tu marca trabaja en más de un país, añade una pregunta: en qué idioma se desarrolla el proyecto y quién se ocupa de las versiones traducidas.</p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">09</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Cómo se comparan dos propuestas de diseño web?</h3><i aria-hidden="true"></i></summary><div><p>Leyendo las dos con las mismas preguntas: quién dirige el proyecto, qué estudio previo hay, quién aporta textos e imágenes, cuántas páginas se diseñan una a una, qué se entrega en el lanzamiento y qué cuesta mantener la web después. Solo cuando ambas responden a lo mismo tiene sentido comparar el precio.</p></div></details>
<details name="art-faq"><summary><h3>¿Por qué varía tanto el precio entre estudios de diseño web?</h3><i aria-hidden="true"></i></summary><div><p>Porque no presupuestan el mismo trabajo. Las diferencias suelen estar en las horas de dirección, en si el contenido está incluido, en cuántas páginas tienen un diseño propio y en el nivel de animación. Dos webs con el mismo número de páginas pueden requerir un esfuerzo muy distinto.</p></div></details>
<details name="art-faq"><summary><h3>¿Qué debe incluir una propuesta de diseño web para una marca premium?</h3><i aria-hidden="true"></i></summary><div><p>Alcance detallado por páginas, fases y plazos, responsable del proyecto, quién se ocupa del contenido, rondas de revisión, lo que se entrega en el lanzamiento —SEO, redirecciones, analítica—, titularidad de dominio y licencias, formación y costes a partir del segundo año.</p></div></details>
<details name="art-faq"><summary><h3>¿Es mejor un presupuesto desglosado o un precio cerrado?</h3><i aria-hidden="true"></i></summary><div><p>Ambos sirven si el alcance está bien descrito. El desglose facilita quitar partidas, pero algunas sostienen a las demás. El precio cerrado compromete al estudio con el resultado completo del alcance acordado; las ampliaciones se presupuestan aparte. Lo importante es poder leer con detalle qué incluye.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuántas propuestas conviene pedir?</h3><i aria-hidden="true"></i></summary><div><p>Dos o tres, de estudios cuyo trabajo ya te convenza. Pedir más alarga la decisión y hace más difícil una comparación seria. Elige primero por portfolio y por la conversación inicial, y después compara las propuestas.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuánto tarda en hacerse una web a medida?</h3><i aria-hidden="true"></i></summary><div><p>Entre seis semanas y tres meses en la mayoría de los proyectos, según el número de páginas y el contenido que haya que crear. El plazo depende también de la rapidez con la que el cliente revisa y aprueba cada fase.</p></div></details>
</div>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/cuanto-cuesta-una-pagina-web-en-2026/">Cuánto cuesta una página web en 2026</a>
<a href="https://a-estudio.co/diseno-web-a-medida-vs-plantilla/">Diseño web a medida o plantilla</a>
<a href="https://a-estudio.co/diseno-web-marcas-premium/">Diseño web para marcas premium</a>
<a href="https://a-estudio.co/diseno-web-premium/">Diseño web premium a medida</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Una propuesta empieza por una conversación</span>
<h2 id="h-close">
<span class="art-line"><span>Si estás comparando propuestas</span></span>
<span class="art-line"><span><em>y quieres incluir la nuestra.</em></span></span>
</h2>
<p data-rv>Cuéntanos qué necesita tu marca y en qué punto estás. Revisamos tu web actual y te decimos con claridad qué haríamos, en cuánto tiempo y por cuánto.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>
<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count >= 7){
result.innerHTML='Esta propuesta responde a '+count+' de 9. <strong>Puedes compararla con otras sabiendo qué incluye.</strong>';
}else{
result.innerHTML='Esta propuesta responde a '+count+' de 9. Pide por escrito lo que falta antes de comparar precios: <strong>ahí suelen estar las diferencias.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/comparar-propuestas-diseno-web/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Diseño web"
    },
    {
     "@type": "Thing",
     "name": "Propuesta de diseño web"
    },
    {
     "@type": "Thing",
     "name": "Presupuesto de diseño web"
    }
   ],
   "mentions": [
    {
     "@type": "CreativeWork",
     "name": "Lilium Aesthetic Studio · Diseño web",
     "url": "https://a-estudio.co/lilium-aesthetic-studio/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    },
    {
     "@type": "CreativeWork",
     "name": "Coco Salón · Diseño web",
     "url": "https://a-estudio.co/coco-salon/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/comparar-propuestas-diseno-web/#faq",
   "inLanguage": "es-ES",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Cómo se comparan dos propuestas de diseño web?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Leyendo las dos con las mismas preguntas: quién dirige el proyecto, qué estudio previo hay, quién aporta textos e imágenes, cuántas páginas se diseñan una a una, qué se entrega en el lanzamiento y qué cuesta mantener la web después. Solo cuando ambas responden a lo mismo tiene sentido comparar el precio."
     }
    },
    {
     "@type": "Question",
     "name": "¿Por qué varía tanto el precio entre estudios de diseño web?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Porque no presupuestan el mismo trabajo. Las diferencias suelen estar en las horas de dirección, en si el contenido está incluido, en cuántas páginas tienen un diseño propio y en el nivel de animación. Dos webs con el mismo número de páginas pueden requerir un esfuerzo muy distinto."
     }
    },
    {
     "@type": "Question",
     "name": "¿Qué debe incluir una propuesta de diseño web para una marca premium?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Alcance detallado por páginas, fases y plazos, responsable del proyecto, quién se ocupa del contenido, rondas de revisión, lo que se entrega en el lanzamiento —SEO, redirecciones, analítica—, titularidad de dominio y licencias, formación y costes a partir del segundo año."
     }
    },
    {
     "@type": "Question",
     "name": "¿Es mejor un presupuesto desglosado o un precio cerrado?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Ambos sirven si el alcance está bien descrito. El desglose facilita quitar partidas, pero algunas sostienen a las demás. El precio cerrado compromete al estudio con el resultado completo del alcance acordado; las ampliaciones se presupuestan aparte. Lo importante es poder leer con detalle qué incluye."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuántas propuestas conviene pedir?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Dos o tres, de estudios cuyo trabajo ya te convenza. Pedir más alarga la decisión y hace más difícil una comparación seria. Elige primero por portfolio y por la conversación inicial, y después compara las propuestas."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuánto tarda en hacerse una web a medida?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Entre seis semanas y tres meses en la mayoría de los proyectos, según el número de páginas y el contenido que haya que crear. El plazo depende también de la rapidez con la que el cliente revisa y aprueba cada fase."
     }
    }
   ]
  }
 ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web para una marca premium</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Web Clínica Medicina Estética</title>
		<link>https://a-estudio.co/web-clinica-medicina-estetica/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Thu, 24 Sep 2026 10:42:06 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=29767</guid>

					<description><![CDATA[<p>A-ESTUDIO / Ideas / Clínicas Qué debe tener la web de una clínica de medicina estética: 8 aspectos que revisar. La web de una clínica de medicina estética debe transmitir confianza médica antes de presentar tratamientos. Este artículo revisa ocho aspectos que conviene observar: primera pantalla, arquitectura de tratamientos, equipo, tecnología, evidencias, sedes, solicitud de [&#8230;]</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/web-clinica-medicina-estetica/">Web Clínica Medicina Estética</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-29767">.elementor-29767 .elementor-element.elementor-element-aa2fc33{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="29767" class="elementor elementor-29767" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-aa2fc33 e-con-full e-flex e-con e-parent" data-id="aa2fc33" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-813e32a elementor-widget elementor-widget-html" data-id="813e32a" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · WEB PARA CLÍNICAS DE MEDICINA ESTÉTICA
Widget HTML / Elementor Pro.
Plantilla recomendada: entrada a ancho completo, sin título ni imagen destacada de la plantilla.

URL: https://a-estudio.co/web-clinica-medicina-estetica/
RANK MATH · Focus keyword: web clínica medicina estética
SEO title propuesto: Qué debe tener la web de una clínica de medicina estética: 8 aspectos que revisar
Meta description propuesta: Los 8 aspectos que conviene revisar en la web de una clínica de medicina estética para transmitir confianza, facilitar la consulta y evitar errores que dificultan la cita.

Schema: este widget NO emite JSON-LD manual. Configurar BlogPosting y FAQ desde Rank Math si procede.
Header sticky: #aeClinicaMedArt{--sticky-top:ALTURApx}
-->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&display=swap">

<style id="ae-clinica-med-art-styles">
@font-face{
  font-family:'AE Clinic Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'AE Clinic Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeClinicaMedArt{
  --paper:#F3EEE7;
  --paper-2:#E9E3D8;
  --ink:#313131;
  --muted:#6A645A;
  --line:rgba(49,49,49,.16);
  --line-strong:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Clinic Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --gap:clamp(24px,4vw,72px);
  --max:1440px;
  --sticky-top:0px;

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  text-align:left !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#aeClinicaMedArt,
#aeClinicaMedArt *,
#aeClinicaMedArt *::before,
#aeClinicaMedArt *::after{
  box-sizing:border-box;
}

#aeClinicaMedArt :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeClinicaMedArt :where(ol,ul){
  list-style:none;
}

#aeClinicaMedArt img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeClinicaMedArt [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeClinicaMedArt ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR / THEME STYLE
   Fuerza color, hover, visited, tipografía y mayúsculas.
========================================================= */

html body #aeClinicaMedArt#aeClinicaMedArt,
html body #aeClinicaMedArt#aeClinicaMedArt *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
  box-shadow:none;
}

html body #aeClinicaMedArt#aeClinicaMedArt :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label,cite
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeClinicaMedArt#aeClinicaMedArt p,
html body #aeClinicaMedArt#aeClinicaMedArt li,
html body #aeClinicaMedArt#aeClinicaMedArt td,
html body #aeClinicaMedArt#aeClinicaMedArt dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--accent,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt a,
html body #aeClinicaMedArt#aeClinicaMedArt a:link,
html body #aeClinicaMedArt#aeClinicaMedArt a:visited,
html body #aeClinicaMedArt#aeClinicaMedArt a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt a:hover,
html body #aeClinicaMedArt#aeClinicaMedArt a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-body a,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-related a{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-body a:hover,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-body a:focus-visible,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-related a:hover,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

#aeClinicaMedArt :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeClinicaMedArt .ae-med-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* PROGRESO */
#aeClinicaMedArt .ae-med-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeClinicaMedArt .ae-med-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* MOTION */
#aeClinicaMedArt .ae-med-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeClinicaMedArt .ae-med-line>span{
  display:block;
}

#aeClinicaMedArt.is-js .ae-med-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeClinicaMedArt.is-js .is-seen .ae-med-line>span,
#aeClinicaMedArt.is-in .ae-med-title .ae-med-line>span{
  transform:none;
}

#aeClinicaMedArt.is-js :is(h1,h2) .ae-med-line:nth-child(2)>span{
  --d:.08s;
}

#aeClinicaMedArt.is-js :is(h1,h2) .ae-med-line:nth-child(3)>span{
  --d:.16s;
}

#aeClinicaMedArt.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeClinicaMedArt.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeClinicaMedArt.is-js .ae-med-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeClinicaMedArt.is-in .ae-med-rise{
  opacity:1;
  transform:none;
}

#aeClinicaMedArt [data-clip] .ae-med-img{
  overflow:hidden;
  background:var(--paper-2);
}

#aeClinicaMedArt.is-js [data-clip] .ae-med-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeClinicaMedArt.is-js [data-clip].is-seen .ae-med-img{
  clip-path:inset(0);
}

/* HERO */
#aeClinicaMedArt .ae-med-hero{
  background:var(--paper) !important;
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
}

#aeClinicaMedArt .ae-med-crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-crumbs a,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-crumbs a:link,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-crumbs a:visited,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-crumbs a:active{
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
  text-decoration:none !important;
  border:0 !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-crumbs a:hover,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:23ch;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-title span{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-title em{
  color:var(--olive) !important;
  -webkit-text-fill-color:var(--olive) !important;
}

#aeClinicaMedArt .ae-med-title .ae-med-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeClinicaMedArt .ae-med-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-dek strong{
  font-weight:400 !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeClinicaMedArt .ae-med-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

#aeClinicaMedArt .ae-med-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeClinicaMedArt .ae-med-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-author,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-author:link,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-author:visited,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-author:hover,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  border:0 !important;
}

#aeClinicaMedArt .ae-med-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeClinicaMedArt .ae-med-hero-fig .ae-med-img{
  aspect-ratio:1900/1040;
}

#aeClinicaMedArt .ae-med-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeClinicaMedArt figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* LONGREAD + ÍNDICE */
#aeClinicaMedArt .ae-med-longread{
  position:relative;
  background:var(--paper) !important;
  padding-block:clamp(56px,9vh,110px) 0;
}

#aeClinicaMedArt .ae-med-layout,
#aeClinicaMedArt .ae-med-toc-layer,
#aeClinicaMedArt .ae-med-wide-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--gap);
}

#aeClinicaMedArt .ae-med-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeClinicaMedArt .ae-med-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  padding-top:6px;
  scrollbar-width:thin;
  transition:color .35s var(--ease);
}

#aeClinicaMedArt .ae-med-toc ol{
  margin-top:14px;
  border-top:1px solid var(--line);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a:link,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a:visited,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a:active{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  border-bottom:1px solid var(--line) !important;
  font-size:14px !important;
  line-height:1.35 !important;
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
  text-decoration:none !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease),border-color .4s var(--ease);
}

#aeClinicaMedArt .ae-med-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--line-strong);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a:hover,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a:focus-visible,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  padding-left:20px;
}

#aeClinicaMedArt .ae-med-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

/* Índice sobre banda verde */
html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc .ae-med-micro{
  color:rgba(243,238,231,.70) !important;
  -webkit-text-fill-color:rgba(243,238,231,.70) !important;
}

#aeClinicaMedArt.is-toc-on-dark .ae-med-toc ol{
  border-top-color:rgba(243,238,231,.20);
}

html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a,
html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a:link,
html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a:visited,
html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a:active{
  color:rgba(243,238,231,.52) !important;
  -webkit-text-fill-color:rgba(243,238,231,.52) !important;
  border-bottom-color:rgba(243,238,231,.16) !important;
}

html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a:hover,
html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a:focus-visible,
html body #aeClinicaMedArt.is-toc-on-dark .ae-med-toc a[aria-current="true"]{
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

#aeClinicaMedArt.is-toc-on-dark .ae-med-toc a::before{
  border-color:rgba(243,238,231,.40);
}

#aeClinicaMedArt.is-toc-on-dark .ae-med-toc a[aria-current="true"]::before{
  background:var(--lime);
  border-color:var(--lime);
}

#aeClinicaMedArt .ae-med-toc-space{
  grid-column:1;
  min-width:0;
}

#aeClinicaMedArt .ae-med-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeClinicaMedArt .ae-med-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeClinicaMedArt .ae-med-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeClinicaMedArt .ae-med-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeClinicaMedArt .ae-med-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-body h2,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof h2,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

#aeClinicaMedArt .ae-med-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeClinicaMedArt .ae-med-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* RESUMEN */
#aeClinicaMedArt .ae-med-eight{
  margin-top:10px;
  border-top:1px solid var(--line-strong);
}

#aeClinicaMedArt .ae-med-eight li{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font:300 19px/1.45 var(--serif) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-eight li,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-eight li span{
  font-family:var(--serif) !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-eight .ae-med-micro{
  font-family:var(--mono) !important;
  padding-top:5px;
  color:var(--olive) !important;
  -webkit-text-fill-color:var(--olive) !important;
}

#aeClinicaMedArt.is-js .ae-med-eight li{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeClinicaMedArt.is-js .ae-med-eight.is-seen li{
  opacity:1;
  transform:none;
}

#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(2){transition-delay:.06s}
#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(3){transition-delay:.12s}
#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(4){transition-delay:.18s}
#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(5){transition-delay:.24s}
#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(6){transition-delay:.30s}
#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(7){transition-delay:.36s}
#aeClinicaMedArt .ae-med-eight.is-seen li:nth-child(8){transition-delay:.42s}

/* PRINCIPIOS */
#aeClinicaMedArt .ae-med-principles{
  margin-top:30px;
  border-top:1px solid var(--line-strong);
}

#aeClinicaMedArt .ae-med-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
  -webkit-text-fill-color:var(--olive) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeClinicaMedArt .ae-med-principles p{
  margin:0;
  font-size:17px;
}

/* FIGURAS, LISTAS, NOTAS */
#aeClinicaMedArt .ae-med-fig{
  margin:6px 0 28px;
}

#aeClinicaMedArt .ae-med-fig .ae-med-img{
  aspect-ratio:4/5;
}

#aeClinicaMedArt .ae-med-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-note{
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
  font-size:15px !important;
}

#aeClinicaMedArt .ae-med-list{
  border-top:1px solid var(--line);
  margin:10px 0 18px;
}

#aeClinicaMedArt .ae-med-list li{
  position:relative;
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--line);
  font-size:17px;
}

#aeClinicaMedArt .ae-med-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeClinicaMedArt .ae-med-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeClinicaMedArt .ae-med-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --muted:#BDB6AB;
  --accent:var(--lime);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-aside,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-aside :is(p,span,em,strong,a){
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-aside p{
  margin:10px 0 0 !important;
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-aside .ae-med-micro{
  color:var(--lime) !important;
  -webkit-text-fill-color:var(--lime) !important;
}

/* RESULTADOS · FONDO VERDE */
#aeClinicaMedArt .ae-med-proof{
  grid-column:1/-1;
  width:100%;
  --fg:var(--paper);
  --muted:#D9D3BF;
  --accent:var(--lime);
  background:var(--olive) !important;
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof *{
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof :is(h2,h3,p,span,blockquote,strong,cite){
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof em,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof h2 em,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof .ae-med-stat-number em{
  color:var(--lime) !important;
  -webkit-text-fill-color:var(--lime) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof .ae-med-micro,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof cite{
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
}

#aeClinicaMedArt .ae-med-proof-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeClinicaMedArt .ae-med-proof-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeClinicaMedArt .ae-med-proof-head>.ae-med-micro{
  grid-column:1/-1;
}

#aeClinicaMedArt .ae-med-proof-head h2{
  grid-column:1;
}

#aeClinicaMedArt .ae-med-proof-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeClinicaMedArt .ae-med-stat{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(10px,2vw,22px);
  align-items:start;
  margin:clamp(56px,9vh,110px) 0 clamp(48px,8vh,96px);
  padding-bottom:clamp(32px,5vh,56px);
  border-bottom:1px solid rgba(243,238,231,.28);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-stat-number{
  font:300 clamp(94px,15vw,240px)/.82 var(--serif) !important;
  letter-spacing:-.055em !important;
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
  max-width:100%;
  overflow:visible;
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-stat-number span{
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-stat-text{
  justify-self:end;
  max-width:min(42ch,100%);
  font:300 clamp(18px,1.35vw,23px)/1.42 var(--serif) !important;
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

#aeClinicaMedArt .ae-med-quotes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,56px);
}

#aeClinicaMedArt .ae-med-quote{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  border-top:1px solid var(--lime);
  padding-top:22px;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-quote p{
  font:300 clamp(22px,1.9vw,30px)/1.22 var(--serif) !important;
  letter-spacing:-.012em !important;
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-quote cite{
  font-style:normal !important;
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
}

/* CHECKLIST */
#aeClinicaMedArt .ae-med-checks{
  margin-top:14px;
  border-top:1px solid var(--line-strong);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-checks button:hover{
  padding-left:6px;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-checks button,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-checks button span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeClinicaMedArt .ae-med-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--line-strong);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeClinicaMedArt .ae-med-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeClinicaMedArt button[aria-pressed="true"] .ae-med-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeClinicaMedArt button[aria-pressed="true"] .ae-med-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeClinicaMedArt#aeClinicaMedArt button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeClinicaMedArt .ae-med-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper-2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-result,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-result *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeClinicaMedArt .ae-med-result.is-active{
  background:rgba(200,189,100,.26);
}

/* FAQ */
#aeClinicaMedArt .ae-med-faq{
  border-top:1px solid var(--line-strong);
}

#aeClinicaMedArt .ae-med-faq details{
  border-bottom:1px solid var(--line);
}

#aeClinicaMedArt .ae-med-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeClinicaMedArt .ae-med-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeClinicaMedArt .ae-med-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-faq details[open] h3{
  font-style:italic !important;
}

#aeClinicaMedArt .ae-med-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeClinicaMedArt .ae-med-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeClinicaMedArt .ae-med-faq details>div{
  padding:0 0 22px;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-faq details>div p{
  font-size:16px !important;
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
}

#aeClinicaMedArt .ae-med-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--line);
}

#aeClinicaMedArt .ae-med-related .ae-med-micro{
  width:100%;
}

/* CIERRE */
#aeClinicaMedArt .ae-med-close{
  --fg:var(--paper);
  --muted:#BDB6AB;
  --accent:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeClinicaMedArt .ae-med-close .ae-med-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close :is(h2,p,span,em,strong){
  color:var(--paper) !important;
  -webkit-text-fill-color:var(--paper) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close h2{
  margin:22px 0;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close h2 em{
  color:var(--rose) !important;
  -webkit-text-fill-color:var(--rose) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close p{
  max-width:52ch;
  color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close .ae-med-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:var(--rose) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:link,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:visited,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:active{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn *,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn span,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close .ae-med-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:hover,
html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:focus-visible{
  gap:52px;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

#aeClinicaMedArt .ae-med-btn svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
  display:block;
  color:var(--ink) !important;
  stroke:currentColor !important;
}

/* RESPONSIVE */
@media(max-width:1100px){
  #aeClinicaMedArt .ae-med-layout,
  #aeClinicaMedArt .ae-med-toc-layer,
  #aeClinicaMedArt .ae-med-wide-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeClinicaMedArt .ae-med-proof-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeClinicaMedArt{
    --gut:clamp(20px,6vw,34px);
  }

  #aeClinicaMedArt .ae-med-hero-grid,
  #aeClinicaMedArt .ae-med-proof-head,
  #aeClinicaMedArt .ae-med-stat,
  #aeClinicaMedArt .ae-med-quotes{
    grid-template-columns:1fr;
  }

  #aeClinicaMedArt .ae-med-proof-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeClinicaMedArt .ae-med-longread{
    padding-block:32px 0;
  }

  #aeClinicaMedArt .ae-med-layout,
  #aeClinicaMedArt .ae-med-toc-layer,
  #aeClinicaMedArt .ae-med-wide-grid{
    display:block;
  }

  #aeClinicaMedArt .ae-med-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeClinicaMedArt .ae-med-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeClinicaMedArt .ae-med-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeClinicaMedArt .ae-med-toc-space{
    display:none;
  }

  #aeClinicaMedArt .ae-med-body{
    max-width:none;
  }

  #aeClinicaMedArt .ae-med-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeClinicaMedArt .ae-med-hero-fig .ae-med-img{
    aspect-ratio:4/5;
  }

  #aeClinicaMedArt .ae-med-proof{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeClinicaMedArt .ae-med-quotes{
    gap:34px;
  }

  #aeClinicaMedArt figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeClinicaMedArt .ae-med-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-num{
    font-size:40px !important;
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeClinicaMedArt .ae-med-eight li{
    grid-template-columns:40px minmax(0,1fr);
    font-size:18px !important;
  }
}

@media(max-width:620px){
  #aeClinicaMedArt .ae-med-byline{
    align-items:flex-start;
  }

  #aeClinicaMedArt .ae-med-principles li{
    grid-template-columns:1fr;
  }

  #aeClinicaMedArt .ae-med-principles .ae-med-num{
    margin-bottom:10px;
  }

  #aeClinicaMedArt .ae-med-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-checks button{
    font-size:18px !important;
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn{
    width:100%;
    gap:22px;
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:hover,
  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-btn:focus-visible{
    gap:28px;
  }
}

@media(max-width:420px){
  #aeClinicaMedArt{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-body h2,
  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-proof h2,
  html body #aeClinicaMedArt#aeClinicaMedArt .ae-med-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeClinicaMedArt .ae-med-hero{
    padding-top:calc(26px + var(--sticky-top));
  }
}

@media(prefers-reduced-motion:reduce){
  #aeClinicaMedArt *,
  #aeClinicaMedArt *::before,
  #aeClinicaMedArt *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeClinicaMedArt .ae-med-line>span,
  #aeClinicaMedArt [data-rv],
  #aeClinicaMedArt .ae-med-rise,
  #aeClinicaMedArt .ae-med-eight li{
    opacity:1 !important;
    transform:none !important;
  }

  #aeClinicaMedArt [data-clip] .ae-med-img{
    clip-path:none !important;
  }
}

@media print{
  #aeClinicaMedArt .ae-med-progress,
  #aeClinicaMedArt .ae-med-toc-layer{
    display:none;
  }

  #aeClinicaMedArt *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
</style>

<article id="aeClinicaMedArt" class="ae-med-article" data-ae-med-art lang="es">
  <div class="ae-med-progress" aria-hidden="true"><i data-progress></i></div>

  <header class="ae-med-hero">
    <div class="ae-med-shell">
      <nav class="ae-med-crumbs ae-med-micro" aria-label="Ruta">
        <a href="https://a-estudio.co/">A-ESTUDIO</a>
        <span aria-hidden="true">/</span>
        <a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
        <span aria-hidden="true">/</span>
        <span>Clínicas</span>
      </nav>

      <h1 class="ae-med-title">
        <span class="ae-med-line"><span>Qué debe tener la web</span></span>
        <span class="ae-med-line"><span>de una clínica de medicina estética:</span></span>
        <span class="ae-med-line"><span><em>8 aspectos que revisar.</em></span></span>
      </h1>

      <div class="ae-med-hero-grid">
        <p class="ae-med-dek ae-med-rise" style="--d:.45s"><strong>La web de una clínica de medicina estética debe transmitir confianza médica antes de presentar tratamientos.</strong> Este artículo revisa ocho aspectos que conviene observar: primera pantalla, arquitectura de tratamientos, equipo, tecnología, evidencias, sedes, solicitud de cita y base técnica.</p>

        <div class="ae-med-byline ae-med-rise" style="--d:.6s">
          <img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
          <div>
            <a class="ae-med-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
            <span class="ae-med-micro">Fundadora y directora creativa · A-ESTUDIO</span>
            <span class="ae-med-micro"><time datetime="2026-09-24">Actualizado · 24 septiembre 2026</time> · 10 min de lectura</span>
          </div>
        </div>
      </div>

      <figure class="ae-med-hero-fig" data-clip>
        <div class="ae-med-img">
          <img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/05/navona-wellness-clinic-a-estudio.jpg" width="1900" height="1040" loading="eager" fetchpriority="high" decoding="async" alt="Web de Navona Wellness Clinic en escritorio y móvil: diseño web para una clínica de medicina estética, por A-ESTUDIO">
        </div>
        <figcaption class="ae-med-micro">
          <span>Navona Wellness Clinic</span>
          <span>Medicina estética y bienestar dentro de una misma presencia.</span>
        </figcaption>
      </figure>
    </div>
  </header>

  <main class="ae-med-longread">
    <div class="ae-med-shell ae-med-toc-layer">
      <aside class="ae-med-toc" aria-label="Índice del artículo">
        <p class="ae-med-micro">Índice</p>
        <ol>
          <li><a href="#resumen">Los 8 aspectos</a></li>
          <li><a href="#elementos">Uno a uno</a></li>
          <li><a href="#resultados">Resultados</a></li>
          <li><a href="#errores">Errores que dificultan la consulta</a></li>
          <li><a href="#publicidad">Publicidad sanitaria</a></li>
          <li><a href="#revision">Revisa tu web</a></li>
          <li><a href="#preguntas">Preguntas frecuentes</a></li>
        </ol>
      </aside>
    </div>

    <div class="ae-med-shell ae-med-layout">
      <div class="ae-med-toc-space" aria-hidden="true"></div>

      <div class="ae-med-body">
        <p class="ae-med-drop" data-rv>Una persona que busca un tratamiento estético no compara solo precios. Compara confianza. Antes de pedir cita quiere saber quién la va a tratar, cómo se decide lo que necesita y si la clínica es capaz de cuidar sin exagerar. La web es, casi siempre, el primer lugar donde responde a esas preguntas.</p>

        <section id="resumen" aria-labelledby="h-res">
          <span class="ae-med-kicker ae-med-micro">01 · En resumen</span>
          <h2 id="h-res">
            <span class="ae-med-line"><span>Los 8 aspectos</span></span>
            <span class="ae-med-line"><span><em>que conviene revisar.</em></span></span>
          </h2>

          <ol class="ae-med-eight" data-rv>
            <li><span class="ae-med-micro">01</span><span>Una primera pantalla que explique cómo cuida la clínica, no solo qué ofrece.</span></li>
            <li><span class="ae-med-micro">02</span><span>Tratamientos organizados según intención de búsqueda, zona, preocupación o técnica.</span></li>
            <li><span class="ae-med-micro">03</span><span>Un equipo sanitario visible: nombres, formación, responsabilidad y trayectoria.</span></li>
            <li><span class="ae-med-micro">04</span><span>La tecnología explicada para el paciente, no solo enumerada.</span></li>
            <li><span class="ae-med-micro">05</span><span>Información y evidencias verificables, con contexto y límites.</span></li>
            <li><span class="ae-med-micro">06</span><span>Sedes, horarios y contacto claros y coherentes.</span></li>
            <li><span class="ae-med-micro">07</span><span>Una experiencia móvil que permita informarse y solicitar cita con facilidad.</span></li>
            <li><span class="ae-med-micro">08</span><span>Una base técnica sólida: velocidad, accesibilidad, estructura y SEO.</span></li>
          </ol>
        </section>

        <section id="elementos" aria-labelledby="h-ele">
          <span class="ae-med-kicker ae-med-micro">02</span>
          <h2 id="h-ele">
            <span class="ae-med-line"><span>Los 8 aspectos,</span></span>
            <span class="ae-med-line"><span><em>uno a uno.</em></span></span>
          </h2>

          <ol class="ae-med-principles">
            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">1</span>
              <div>
                <h3>Una primera pantalla que explique cómo cuida la clínica</h3>
                <p>El visitante debería entender en segundos qué tipo de clínica es: su enfoque, su especialidad y dónde está. Un titular que describe una forma de trabajar genera más confianza que un carrusel de ofertas. En <a href="https://a-estudio.co/clinica-guallar-espallargas/">Clínica Guallar Espallargas</a>, la portada abre con una posición —«Cuidar sin perder la esencia»— antes de mostrar un solo tratamiento.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">2</span>
              <div>
                <h3>Tratamientos organizados por intención real</h3>
                <p>Las búsquedas pueden partir del nombre de un tratamiento, de una zona o de una preocupación. La arquitectura debe conectar esas formas de buscar. No hace falta crear una URL automática para cada variante: conviene trabajar páginas propias cuando existe contenido diferenciado, intención suficiente y una explicación clínica útil para el paciente.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">3</span>
              <div>
                <h3>Un equipo sanitario visible</h3>
                <p>En medicina estética, la confianza tiene nombre propio. Mostrar a los profesionales con su formación, trayectoria, responsabilidad y forma de trabajar convierte una clínica en un lugar concreto. Cuando la clínica tiene historia, contarla bien es una ventaja: dos generaciones, una especialidad, una manera de decidir.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">4</span>
              <div>
                <h3>La tecnología explicada, no enumerada</h3>
                <p>Una lista de equipos con nombres comerciales no dice nada al paciente si no se explica su función. Conviene contar para qué sirve cada tecnología, qué permite valorar y qué papel tiene dentro del proceso. Mejor todavía si se presenta como apoyo a la valoración médica y no como sustituto.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">5</span>
              <div>
                <h3>Información y evidencias verificables</h3>
                <p>No todas las clínicas necesitan mostrar fotografías de antes y después. Lo importante es que la información que aparece en la web sea verificable, clara y proporcional: tecnología, experiencia del equipo, metodología, medios, consentimiento cuando proceda y contexto suficiente para no generar expectativas indebidas. El consentimiento del paciente no sustituye la revisión de la normativa sanitaria aplicable.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">6</span>
              <div>
                <h3>Sedes, horarios y contacto coherentes</h3>
                <p>Dirección, teléfono y horarios deben estar claros y ser coherentes con otros canales, especialmente la ficha de Google. Si hay varias sedes, cada una necesita una lectura ordenada. <a href="https://a-estudio.co/clinicas-acacias/">Clínicas Acacias</a>, con varias especialidades bajo una misma marca, es un buen ejemplo de cómo ordenar mucha información sin que el visitante se pierda.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">7</span>
              <div>
                <h3>Solicitar cita con facilidad</h3>
                <p>La experiencia móvil debe permitir consultar la información y solicitar cita con facilidad. WhatsApp, un formulario corto o un sistema de reserva deben estar a mano, pero sin interrumpir la lectura antes de tiempo. La cita debería llegar como conclusión natural, no como presión.</p>
              </div>
            </li>

            <li data-rv>
              <span class="ae-med-num" aria-hidden="true">8</span>
              <div>
                <h3>Una base técnica sólida</h3>
                <p>Una web rápida, legible en móvil y accesible. Información en texto real —no solo en imágenes—, encabezados que describan cada sección, enlaces internos entre tratamientos y datos estructurados cuando correspondan. El posicionamiento específico para clínicas se desarrolla con más profundidad en <a href="https://a-estudio.co/seo-clinicas-medicina-estetica/">SEO para clínicas de medicina estética</a>; este artículo se centra en qué revisar dentro de la web.</p>
              </div>
            </li>
          </ol>

          <figure class="ae-med-fig" data-clip>
            <div class="ae-med-img">
              <img loading="lazy" src="https://a-estudio.co/wp-content/uploads/2026/03/policlinicas-acacias.jpg" width="1080" height="1350" loading="lazy" decoding="async" alt="Web de Clínicas Acacias en móvil: varias especialidades médicas ordenadas bajo una misma marca, por A-ESTUDIO">
            </div>
            <figcaption class="ae-med-micro">
              <span>Clínicas Acacias</span>
              <span>Varias especialidades, una sola forma de leerlas.</span>
            </figcaption>
          </figure>
        </section>
      </div>
    </div>

    <section class="ae-med-proof" id="resultados" aria-labelledby="h-proof" data-toc-dark>
      <div class="ae-med-shell ae-med-wide-grid">
        <div class="ae-med-toc-space" aria-hidden="true"></div>

        <div class="ae-med-proof-main">
          <div class="ae-med-proof-head">
            <span class="ae-med-micro">03 · Resultados</span>
            <h2 id="h-proof">
              <span class="ae-med-line"><span>Lo que ocurre cuando la web</span></span>
              <span class="ae-med-line"><span><em>está a la altura de la clínica.</em></span></span>
            </h2>
            <p data-rv>Una web no sustituye la calidad médica. La hace visible. Cuando el contenido está ordenado y la marca se reconoce, la clínica se entiende mejor y genera más confianza antes de la primera consulta. No es una garantía de resultado para otros proyectos: cada caso depende de su punto de partida, su demanda, su contenido, su reputación y su ejecución.</p>
          </div>

          <div class="ae-med-stat" data-rv>
            <p class="ae-med-stat-number"><span data-count="300">+300</span><em>%</em></p>
            <p class="ae-med-stat-text">Crecimiento observado tras el lanzamiento de la nueva web de una de las clínicas con las que trabajamos.

Proyecto confidencial. Datos del seguimiento del estudio. Cada proyecto parte de una situación diferente.</p>
          </div>

          <div class="ae-med-quotes">
            <blockquote class="ae-med-quote" data-rv>
              <p>«No esperaba que pudieras plasmar tan bien la esencia de la clínica.»</p>
              <cite class="ae-med-micro">Roberto · Clínicas Acacias</cite>
            </blockquote>

            <blockquote class="ae-med-quote" data-rv>
              <p>«Estoy encantada con la web, totalmente personalizada a nuestra marca. No es comercial: es totalmente personalizada.»</p>
              <cite class="ae-med-micro">Eva · Navona Wellness Clinic</cite>
            </blockquote>

            <blockquote class="ae-med-quote" data-rv>
              <p>«Ahora sí sentimos que la clínica tiene una web a la altura de nuestra marca.»</p>
              <cite class="ae-med-micro">Dirección de una clínica del estudio</cite>
            </blockquote>
          </div>
        </div>
      </div>
    </section>

    <div class="ae-med-shell ae-med-layout ae-med-layout--cont">
      <div class="ae-med-toc-space" aria-hidden="true"></div>

      <div class="ae-med-body">
        <section id="errores" aria-labelledby="h-err">
          <span class="ae-med-kicker ae-med-micro">04</span>
          <h2 id="h-err">
            <span class="ae-med-line"><span>Errores que dificultan</span></span>
            <span class="ae-med-line"><span><em>la consulta.</em></span></span>
          </h2>

          <p data-rv>Muchas clínicas con un nivel médico excelente tienen webs que no lo transmiten. Estos son los problemas más frecuentes:</p>

          <ul class="ae-med-list">
            <li data-rv><strong>Fotografías genéricas.</strong> Rostros o escenas que podrían pertenecer a cualquier clínica restan credibilidad cuando sustituyen a información real.</li>
            <li data-rv><strong>Promesas de resultados.</strong> Garantizar resultados o exagerarlos genera desconfianza y puede chocar con la normativa aplicable.</li>
            <li data-rv><strong>Un catálogo sin jerarquía.</strong> Muchos tratamientos con el mismo peso obligan al paciente a adivinar por dónde empezar.</li>
            <li data-rv><strong>Precios sin contexto.</strong> Una cifra suelta, sin explicar qué incluye o cuándo se valora, convierte la decisión en una comparación simplificada.</li>
            <li data-rv><strong>Un equipo invisible.</strong> Sin nombres, responsabilidad sanitaria o trayectoria, la clínica parece intercambiable.</li>
            <li data-rv><strong>Formularios largos o invasivos.</strong> En un primer contacto conviene solicitar solo los datos necesarios, sin pedir historias clínicas o fotografías médicas mediante formularios genéricos.</li>
            <li data-rv><strong>Una web lenta en móvil.</strong> Si tarda en cargar o dificulta la lectura, la confianza cae antes de llegar a la cita.</li>
          </ul>
        </section>

        <section id="publicidad" aria-labelledby="h-pub">
          <span class="ae-med-kicker ae-med-micro">05</span>
          <h2 id="h-pub">
            <span class="ae-med-line"><span>Publicidad sanitaria:</span></span>
            <span class="ae-med-line"><span><em>lo que el diseño debe tener en cuenta.</em></span></span>
          </h2>

          <p data-rv>La publicidad de servicios sanitarios está regulada en España —entre otras normas, por el <a href="https://www.boe.es/buscar/act.php?id=BOE-A-1996-18085" target="_blank" rel="noopener">Real Decreto 1907/1996</a>— y cada comunidad autónoma puede tener requisitos propios. Desde el diseño y el contenido, conviene evitar:</p>

          <ul class="ae-med-list ae-med-list--tight">
            <li data-rv>Garantizar resultados o presentarlos como seguros.</li>
            <li data-rv>Mostrar casos o imágenes clínicas sin revisión previa de la normativa aplicable.</li>
            <li data-rv>Usar testimonios como prueba de eficacia médica.</li>
            <li data-rv>Ocultar quién es el responsable sanitario o los datos que el centro deba facilitar.</li>
          </ul>

          <aside class="ae-med-aside" data-rv>
            <span class="ae-med-micro">Una nota importante</span>
            <p>Este apartado no es asesoramiento legal. Antes de publicar, el contenido clínico debería revisarse por el profesional sanitario responsable y, cuando proceda, por la asesoría jurídica de la clínica. <em>Un buen diseño hace que cumplir la normativa no signifique perder claridad ni carácter.</em></p>
          </aside>
        </section>

        <section id="revision" aria-labelledby="h-rev" data-checklist>
          <span class="ae-med-kicker ae-med-micro">06</span>
          <h2 id="h-rev">
            <span class="ae-med-line"><span>¿Tu web cumple</span></span>
            <span class="ae-med-line"><span><em>estos ocho aspectos?</em></span></span>
          </h2>

          <p class="ae-med-note" data-rv>Marca los puntos que tu web ya resuelve. Es una orientación para ordenar la revisión, no una auditoría técnica, sanitaria o legal.</p>

          <ol class="ae-med-checks">
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>La primera pantalla explica cómo cuida la clínica, no solo qué ofrece.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>Los tratamientos principales están organizados según intención, zona, preocupación o técnica.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>El equipo sanitario aparece con nombre, responsabilidad, formación o trayectoria.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>La tecnología está explicada para el paciente y no solo enumerada.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>La información clínica, visual y comercial es verificable, prudente y revisable.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>Sedes, teléfono, horarios y vías de contacto son claros y coherentes.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>La experiencia móvil permite consultar información y solicitar cita con facilidad.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="ae-med-box" aria-hidden="true"></span><span>La web carga rápido, se lee bien y tiene una estructura comprensible para buscadores.</span></button></li>
          </ol>

          <p class="ae-med-result" aria-live="polite" data-result>Marca los puntos que tu web ya resuelve. Los puntos pendientes ayudan a orientar la revisión; su importancia depende de cómo afectan a la información, la navegación y la solicitud de cita.</p>
        </section>

        <section id="preguntas" aria-labelledby="h-faq">
          <span class="ae-med-kicker ae-med-micro">07</span>
          <h2 id="h-faq">
            <span class="ae-med-line"><span>Preguntas</span></span>
            <span class="ae-med-line"><span><em>frecuentes.</em></span></span>
          </h2>

          <div class="ae-med-faq">
            <details name="ae-med-faq" open>
              <summary><h3>¿Qué debe tener la web de una clínica de medicina estética?</h3><i aria-hidden="true"></i></summary>
              <div><p>Una primera pantalla que explique cómo cuida la clínica, tratamientos organizados según intención de búsqueda, un equipo sanitario visible, tecnología explicada, información verificable, sedes y contacto coherentes, una solicitud de cita sencilla desde móvil y una base técnica sólida.</p></div>
            </details>

            <details name="ae-med-faq">
              <summary><h3>¿Puede una clínica mostrar fotos de antes y después en su web?</h3><i aria-hidden="true"></i></summary>
              <div><p>Depende de la normativa aplicable, del tipo de contenido, del consentimiento y de la revisión profesional correspondiente. El consentimiento del paciente no sustituye la revisión de la normativa sanitaria aplicable ni convierte esas imágenes en obligatorias.</p></div>
            </details>

            <details name="ae-med-faq">
              <summary><h3>¿Es mejor una web completa o landings por tratamiento?</h3><i aria-hidden="true"></i></summary>
              <div><p>Lo más sólido suele ser una web completa con páginas propias para los tratamientos que tengan contenido diferenciado e intención suficiente. Las landings pueden complementar campañas concretas, pero la confianza y el posicionamiento se construyen con una arquitectura estable.</p></div>
            </details>

            <details name="ae-med-faq">
              <summary><h3>¿Cuánto cuesta la web de una clínica estética?</h3><i aria-hidden="true"></i></summary>
              <div><p>Depende del número de tratamientos y sedes, del contenido y la fotografía disponibles, de las integraciones de cita y de si se trabaja también la marca. La propuesta concreta alcance, inversión y tiempos después de conocer la clínica.</p></div>
            </details>

            <details name="ae-med-faq">
              <summary><h3>¿La web ayuda a que la clínica aparezca en Google y en asistentes de IA?</h3><i aria-hidden="true"></i></summary>
              <div><p>Una web bien estructurada, con información en texto, páginas claras, datos coherentes y pruebas reales facilita que buscadores y asistentes de IA comprendan la clínica. Ninguna web puede garantizar una posición, una recomendación o una cita concreta.</p></div>
            </details>
          </div>

          <p class="ae-med-related" data-rv>
            <span class="ae-med-micro">Seguir leyendo</span>
            <a href="https://a-estudio.co/clinicas/">Diseño web para clínicas</a>
            <a href="https://a-estudio.co/seo-clinicas-medicina-estetica/">SEO para clínicas de medicina estética</a>
            <a href="https://a-estudio.co/diseno-web-editorial/">Diseño web editorial</a>
            <a href="https://a-estudio.co/clinica-guallar-espallargas/">Caso Guallar Espallargas</a>
          </p>
        </section>
      </div>
    </div>
  </main>

  <section class="ae-med-close" aria-labelledby="h-close">
    <div class="ae-med-shell">
      <span class="ae-med-micro">Tu clínica, antes de la primera consulta</span>
      <h2 id="h-close">
        <span class="ae-med-line"><span>Si tu clínica es mejor</span></span>
        <span class="ae-med-line"><span><em>de lo que su web transmite.</em></span></span>
      </h2>

      <p data-rv>Revisamos contigo qué debería comprender un paciente antes de pedir cita y cómo tu web puede mostrarlo con claridad y carácter.</p>

      <a class="ae-med-btn" href="https://a-estudio.co/contacto/" data-rv>
        <span>Hablemos de tu clínica</span>
        <svg aria-hidden="true" viewBox="0 0 18 18" focusable="false">
          <path d="M4 14L14 4M7 4h7v7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </section>
</article>

<script id="ae-clinica-med-art-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-med-art]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var reduce=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],.ae-med-eight'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.ae-med-toc a[href^="#"]'));
    var sections=links.map(function(link){
      var href=link.getAttribute('href');
      try{
        return root.querySelector(href);
      }catch(error){
        return null;
      }
    });

    var darkSections=toArray(root.querySelectorAll('[data-toc-dark]'));

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index === currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setTocContrast(){
      var probe=stickyTop() + Math.max(130, window.innerHeight * .32);
      var onDark=false;

      darkSections.forEach(function(section){
        var rect=section.getBoundingClientRect();
        if(rect.top <= probe && rect.bottom >= probe){
          onDark=true;
        }
      });

      root.classList.toggle('is-toc-on-dark',onDark);
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
      setTocContrast();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var checklist=root.querySelector('[data-checklist]');

    if(checklist){
      var buttons=toArray(checklist.querySelectorAll('.ae-med-checks button'));
      var result=checklist.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';
      var total=buttons.length;

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var selected=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',selected > 0);

          if(selected === 0){
            result.innerHTML=base;
          }else{
            result.innerHTML='Has marcado '+selected+' de '+total+' aspectos. Los puntos pendientes ayudan a orientar la revisión; su importancia depende de cómo afectan a la información, la navegación y la solicitud de cita.';
          }
        });
      });
    }

    toArray(root.querySelectorAll('[data-count]')).forEach(function(el){
      if(reduce.matches || !('IntersectionObserver' in window)) return;

      var to=Number(el.getAttribute('data-count')) || 0;
      var observer=new IntersectionObserver(function(entries){
        if(!entries[0].isIntersecting) return;

        observer.disconnect();
        var startTime=performance.now();

        function tick(time){
          var progress=Math.min(1,(time - startTime) / 1600);
          var eased=1 - Math.pow(1 - progress,3);
          var value=Math.round(to * eased);

          el.textContent='+' + value;

          if(progress < 1){
            window.requestAnimationFrame(tick);
          }
        }

        el.textContent='+0';
        window.requestAnimationFrame(tick);
      },{
        threshold:.4
      });

      observer.observe(el);
    });

    toArray(root.querySelectorAll('a[href^="#"]')).forEach(function(link){
      link.addEventListener('click',function(event){
        var href=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(href);
        }catch(error){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:reduce.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',href);
        }

        window.setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/web-clinica-medicina-estetica/">Web Clínica Medicina Estética</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Diseño web editorial</title>
		<link>https://a-estudio.co/diseno-web-editorial/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Thu, 24 Sep 2026 09:29:11 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=29753</guid>

					<description><![CDATA[<p>A-ESTUDIO / Ideas / Diseño web Diseño web editorial: qué es, ejemplos y cuándo conviene a una marca. El diseño web editorial aplica principios de composición, tipografía, jerarquía y ritmo a una web para que su contenido se lea, se entienda y se recorra con facilidad. No es maquetar una revista en pantalla: es ordenar [&#8230;]</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-editorial/">Diseño web editorial</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-29753">.elementor-29753 .elementor-element.elementor-element-a7d41b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="29753" class="elementor elementor-29753" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-a7d41b6 e-con-full e-flex e-con e-parent" data-id="a7d41b6" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-f0d42c7 elementor-widget elementor-widget-html" data-id="f0d42c7" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · DISEÑO WEB EDITORIAL
Widget HTML / Elementor Pro.
Plantilla recomendada: entrada a ancho completo, sin título ni imagen destacada de plantilla para evitar duplicados.

URL: https://a-estudio.co/diseno-web-editorial/
RANK MATH · Focus keyword: diseño web editorial
SEO title: Diseño web editorial: qué es, ejemplos y cuándo conviene a una marca
Meta description: Qué es el diseño web editorial, en qué se diferencia del diseño editorial y cómo se aplica: el caso de Clínica Guallar Espallargas y DLezcano, por A-ESTUDIO.

Schema: este bloque emite Article + FAQPage + BreadcrumbList.
No desactiva Rank Math ni modifica su configuración. Si Rank Math ya emite schema en esta entrada, revisar duplicidades desde la edición de la entrada antes de publicar.
Header sticky: #aeArt1{--sticky-top:ALTURApx}
-->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&display=swap">

<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
</style>

<div id="aeArt1" class="art" data-ae-art1 lang="es">
  <div class="art-progress" aria-hidden="true"><i data-progress></i></div>

  <header class="art-hero">
    <div class="art-shell">
      <nav class="art-crumbs art-micro" aria-label="Ruta">
        <a href="https://a-estudio.co/">A-ESTUDIO</a>
        <span aria-hidden="true">/</span>
        <a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
        <span aria-hidden="true">/</span>
        <span>Diseño web</span>
      </nav>

      <h1 class="art-title">
        <span class="art-line"><span>Diseño web editorial:</span></span>
        <span class="art-line"><span><em>qué es, ejemplos y cuándo</em></span></span>
        <span class="art-line"><span><em>conviene a una marca.</em></span></span>
      </h1>

      <div class="art-hero-grid">
        <p class="art-dek art-rise" style="--d:.45s"><strong>El diseño web editorial aplica principios de composición, tipografía, jerarquía y ritmo a una web para que su contenido se lea, se entienda y se recorra con facilidad.</strong> No es maquetar una revista en pantalla: es ordenar texto, imagen y espacio para que una marca muestre lo que la hace valiosa y el visitante pueda decidir —comprar, reservar o consultar— sin esfuerzo.</p>

        <div class="art-byline art-rise" style="--d:.6s">
          <img fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
          <div>
            <a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
            <span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
            <span class="art-micro"><time datetime="2026-09-24">Actualizado · 24 septiembre 2026</time> · 9 min de lectura</span>
          </div>
        </div>
      </div>

      <figure class="art-hero-fig" data-clip>
        <div class="art-img">
          <img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/ainhoa-va204129zquez-x-a-estudio-2.webp" loading="eager" fetchpriority="high" decoding="async" alt="Web de Clínica Guallar Espallargas: diseño web editorial para una clínica de medicina estética, por A-ESTUDIO">
        </div>
        <figcaption class="art-micro">
          <span>Clínica Guallar Espallargas</span>
          <span>Una trayectoria que se lee, no un catálogo de tratamientos.</span>
        </figcaption>
      </figure>
    </div>
  </header>

  <main class="art-longread">
    <div class="art-shell art-toc-layer">
      <aside class="art-toc" aria-label="Índice del artículo">
        <p class="art-micro">Índice</p>
        <ol>
          <li><a href="#diferencia">Diseño editorial y web editorial</a></li>
          <li><a href="#como-se-reconoce">Cómo se reconoce</a></li>
          <li><a href="#caso-guallar">Caso: Guallar Espallargas</a></li>
          <li><a href="#dlezcano">Otro ejemplo: DLezcano</a></li>
          <li><a href="#senales">7 señales</a></li>
          <li><a href="#cuando">Cuándo tiene sentido</a></li>
          <li><a href="#movil">En móvil</a></li>
          <li><a href="#seo">Editorial y SEO</a></li>
          <li><a href="#preguntas">Preguntas frecuentes</a></li>
        </ol>
      </aside>
    </div>

    <div class="art-shell art-layout">
      <div class="art-toc-space" aria-hidden="true"></div>

      <article class="art-body">
        <p class="art-drop" data-rv>Hay webs en las que todo reclama atención al mismo tiempo. Otras permiten entender, casi sin esfuerzo, dónde mirar, qué importa y por dónde continuar. Esa diferencia tiene mucho que ver con la dirección editorial: cada decisión —el tamaño de una fotografía, la longitud de un titular, la distancia entre dos ideas— influye en cómo se comprende lo que una marca ofrece.</p>

        <section id="diferencia" aria-labelledby="h-dif">
          <span class="art-kicker art-micro">01</span>
          <h2 id="h-dif">
            <span class="art-line"><span>Diseño editorial y diseño web editorial:</span></span>
            <span class="art-line"><span><em>comparten principios, no soporte.</em></span></span>
          </h2>

          <p data-rv>El <strong>diseño editorial</strong> trabaja la lectura de una publicación: una revista, un libro, un catálogo, una memoria o una pieza digital cerrada. Su fuerza está en la edición, la jerarquía, la relación entre texto e imagen y la forma en que cada página sostiene la siguiente.</p>

          <p data-rv>El <strong>diseño web editorial</strong> toma esos principios y los lleva a un entorno vivo. La web no se limita a ser leída: cambia de pantalla, se navega de forma no lineal, permite comparar, reservar, comprar, escribir, volver, filtrar o profundizar. Por eso no basta con “parecer editorial”. Debe convertir la edición en experiencia útil.</p>

          <div class="art-table" data-table role="region" aria-label="Comparación entre diseño editorial y diseño web editorial" tabindex="0">
            <table>
              <thead>
                <tr>
                  <th scope="col"><span class="art-micro">Aspecto</span></th>
                  <th scope="col">Diseño editorial</th>
                  <th scope="col">Diseño web editorial</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">Soporte</th>
                  <td>Publicación impresa o digital cerrada.</td>
                  <td>Sitio web responsive, navegable y actualizable.</td>
                </tr>
                <tr>
                  <th scope="row">Recorrido</th>
                  <td>Secuencia editada por páginas, dobles páginas o capítulos.</td>
                  <td>Recorrido no lineal mediante scroll, menú, enlaces, filtros o llamadas a la acción.</td>
                </tr>
                <tr>
                  <th scope="row">Composición</th>
                  <td>Formato más controlado: proporción, página y ritmo se fijan de antemano.</td>
                  <td>Composición fluida: la jerarquía debe mantenerse en escritorio, tablet y móvil.</td>
                </tr>
                <tr>
                  <th scope="row">Interacción</th>
                  <td>La interacción principal es la lectura.</td>
                  <td>La lectura convive con acciones: consultar, comprar, reservar, contactar o comparar.</td>
                </tr>
                <tr>
                  <th scope="row">Éxito</th>
                  <td>Claridad, permanencia, coherencia y calidad de lectura.</td>
                  <td>Comprensión, confianza, navegación, accesibilidad, rendimiento y decisión.</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p data-rv>Por eso una web editorial no se mide solo por su belleza. Se mide por si el visitante entiende mejor, avanza con menos fricción y llega a la acción con más contexto.</p>
        </section>

        <section id="como-se-reconoce" aria-labelledby="h-rec">
          <span class="art-kicker art-micro">02</span>
          <h2 id="h-rec">
            <span class="art-line"><span>Cómo se reconoce una web</span></span>
            <span class="art-line"><span><em>con dirección editorial.</em></span></span>
          </h2>

          <p data-rv>Una tipografía grande o una fotografía a pantalla completa no bastan. La dirección se aprecia en la relación entre los elementos y en cómo cambia la página al recorrerla.</p>

          <ol class="art-principles">
            <li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Una jerarquía que permite elegir qué leer</h3><p>El visitante debería distinguir la idea principal, encontrar una explicación y detenerse en los detalles que le interesan. Los títulos orientan. Los párrafos desarrollan. Los pies de imagen aportan contexto. Si todo tiene el mismo tamaño o intensidad, esa jerarquía se pierde. Una composición bien resuelta admite tanto una lectura rápida como una exploración más detenida.</p></div></li>
            <li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>Imágenes que explican algo</h3><p>Una imagen puede mostrar una escala, un material, una atmósfera o una forma de trabajar. Su tamaño y su posición deberían responder a esa función. En joyería, una fotografía de detalle permite observar un acabado; una pieza sobre el cuerpo ayuda a comprender su proporción. La dirección editorial decide cuándo se necesita cada una y qué texto debe acompañarla.</p></div></li>
            <li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Espacio que separa y relaciona</h3><p>El espacio en blanco acerca lo que pertenece a una misma idea y separa lo que introduce otra. Cuando una explicación queda demasiado pegada a la siguiente, ambas se leen como un único bloque; cuando la distancia es excesiva, se pierde continuidad. Por eso el espaciado se trabaja junto con el contenido, no como un ajuste decorativo al final.</p></div></li>
            <li data-rv><span class="art-num" aria-hidden="true">4</span><div><h3>Un ritmo que acompaña el recorrido</h3><p>Una página puede alternar una imagen amplia con un detalle, un titular breve con una explicación, una secuencia visual con una pausa de lectura. Repetir la misma composición para todo hace que un proyecto singular, una condición de contratación y un testimonio parezcan igual de importantes.</p></div></li>
          </ol>
        </section>
      </article>
    </div>

    <section class="art-case" id="caso-guallar" aria-labelledby="h-case">
      <div class="art-shell art-case-grid">
        <div class="art-toc-space" aria-hidden="true"></div>

        <div class="art-case-main">
          <div class="art-case-head">
            <span class="art-micro">03 · Caso</span>
            <h2 id="h-case">
              <span class="art-line"><span>El diseño editorial de</span></span>
              <span class="art-line"><span><em>Clínica Guallar Espallargas.</em></span></span>
            </h2>

            <p data-rv><a href="https://a-estudio.co/clinica-guallar-espallargas/">Clínica Guallar Espallargas</a> es una clínica de medicina estética con más de 35 años de trayectoria, dos generaciones de médicas y sedes en Zaragoza, Madrid y Alcañiz. El riesgo era evidente: que toda esa experiencia acabara reducida a una lista de tratamientos, como en tantas webs del sector. La respuesta fue editorial: <a href="https://clinicaguallarespallargas.com/" target="_blank" rel="noopener">la web</a> se construye como una lectura con tesis, ritmo y pruebas.</p>

            <dl class="art-facts" data-rv>
              <div><dt class="art-micro">Trayectoria</dt><dd>+35 años</dd></div>
              <div><dt class="art-micro">Equipo</dt><dd>Dos generaciones</dd></div>
              <div><dt class="art-micro">Sedes</dt><dd>Zaragoza · Madrid · Alcañiz</dd></div>
              <div><dt class="art-micro">Dirección</dt><dd>Ainhoa Vázquez</dd></div>
            </dl>
          </div>

          <ol class="art-decisions">
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">01</span><p class="art-spec">«Cuidar sin perder la esencia.»</p><div><h3>Una idea antes que una oferta</h3><p>La portada no empieza por los servicios, sino por una posición, acompañada de <em>«Treinta y cinco años leyendo rostros antes de tratarlos»</em>. El visitante entiende primero cómo trabaja la clínica y después qué hace.</p></div></li>
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">02</span><p class="art-spec">«La tecnología no sustituye al diagnóstico. Lo amplía.»</p><div><h3>Cada bloque abre con una frase médica, no con un listado</h3><p>Los faciales empiezan con <em>«El rostro se lee antes de elegir el tratamiento»</em>; los corporales, con <em>«El cuerpo también necesita una lectura médica»</em>. Solo después aparecen especialidades y equipos: la jerarquía explica antes de enumerar.</p></div></li>
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">03</span><p class="art-spec">«Lo que ves. Lo que valoramos.»</p><div><h3>Un ritmo reconocible en pares</h3><p>Los titulares se construyen como dípticos: <em>«Dos generaciones. Una misma forma de cuidar»</em>, <em>«Tres ciudades. Una misma forma de cuidar»</em>. La repetición de la estructura da identidad y ayuda a recorrer una web extensa sin perderse.</p></div></li>
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">04</span><p class="art-spec">Monografía · díptico · retícula.</p><div><h3>Formatos distintos para contenidos distintos</h3><p>El manifiesto se compone como una monografía editorial; las dos doctoras se presentan en un díptico que muestra la continuidad entre generaciones; los tratamientos se ordenan en una retícula que permite comparar.</p></div></li>
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">05</span><p class="art-spec">Escuchar. Leer. Decidir. Acompañar.</p><div><h3>El método, en cuatro verbos</h3><p>Un proceso médico explicado con la economía de un índice editorial.</p></div></li>
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">06</span><p class="art-spec">«Nunca sustituir tu diagnóstico.»</p><div><h3>Pruebas con una advertencia ética</h3><p>Los casos reales se acompañan de una frase que protege al paciente: <em>«El caso de otra persona puede orientar una conversación. Nunca sustituir tu diagnóstico»</em>. La presencia de las doctoras en medios se presenta como <em>«Una voz médica. Más allá de la consulta»</em>.</p></div></li>
            <li class="art-dec" data-rv><span class="art-dec-n" aria-hidden="true">07</span><p class="art-spec">«Empecemos por escucharte.»</p><div><h3>La consulta como conclusión</h3><p>El cierre llega cuando el visitante ya ha comprendido la propuesta. Pedir cita no es un atajo comercial, sino el siguiente paso natural de la lectura.</p></div></li>
          </ol>

          <blockquote class="art-pull" data-pull>
            <p><span>La autoridad</span> <span>no se declara.</span> <em>Se documenta.</em></p>
          </blockquote>

          <p class="art-case-foot" data-rv>Es el principio que aplicamos en el <a href="https://a-estudio.co/clinicas/">diseño web para clínicas estéticas y médicas</a>: en un sector donde la confianza decide, el orden del contenido forma parte del diagnóstico.</p>
        </div>
      </div>
    </section>

    <div class="art-shell art-layout art-layout--cont">
      <div class="art-toc-space" aria-hidden="true"></div>

      <article class="art-body">
        <section id="dlezcano" aria-labelledby="h-dl">
          <span class="art-kicker art-micro">04 · Otro ejemplo</span>
          <h2 id="h-dl">
            <span class="art-line"><span>DLezcano:</span></span>
            <span class="art-line"><span><em>el enfoque editorial aplicado a la compra.</em></span></span>
          </h2>

          <figure class="art-fig" data-clip>
            <div class="art-img">
              <img loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/dlezcano-web-ae.webp" width="1080" height="1350" loading="lazy" decoding="async" alt="Ecommerce de joyería DLezcano en ordenador y móvil: diseño web editorial por A-ESTUDIO">
            </div>
            <figcaption class="art-micro">
              <span>DLezcano</span>
              <span>La colección abre el recorrido; la ficha sostiene la decisión.</span>
            </figcaption>
          </figure>

          <p data-rv>En el <a href="https://a-estudio.co/dlezcano/">ecommerce de DLezcano</a> la joya necesita protagonismo, pero también contexto: la vista de colección despierta el interés y la ficha lo sostiene con imágenes, variantes e información de producto. La navegación distingue piezas disponibles, próximas y bajo pedido, y cada situación conduce a su acción: comprar, pedir cita o iniciar un encargo. Más sobre este enfoque en <a href="https://a-estudio.co/diseno-web-joyerias/">diseño web para joyerías</a>. Cómo creamos las imágenes de las piezas, en <a href="https://a-estudio.co/fotografia-joyeria-ia/">fotografía de joyería con IA</a>.</p>
        </section>

        <section id="senales" aria-labelledby="h-sen" data-signals>
          <span class="art-kicker art-micro">05</span>
          <h2 id="h-sen">
            <span class="art-line"><span>7 señales de que tu web</span></span>
            <span class="art-line"><span><em>podría necesitar dirección editorial.</em></span></span>
          </h2>

          <p class="art-note" data-rv>Marca las que reconozcas en tu web. No es un diagnóstico automático: sirve para ordenar la revisión y detectar dónde se está perdiendo claridad.</p>

          <ol class="art-checks">
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Todos tus servicios se presentan igual, aunque no tengan el mismo peso para tu negocio.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Las imágenes decoran, pero no explican materiales, espacios, escala ni forma de trabajar.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Los titulares son sugerentes, pero no dicen qué ofreces ni para quién.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>En móvil, los bloques se apilan sin orden y lo importante queda al final.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>El visitante tiene que leerlo todo para encontrar lo que busca.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>Tu negocio ha evolucionado y la web sigue contando la versión anterior.</span></button></li>
            <li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span>La web es correcta, pero no transmite el nivel real de lo que haces.</span></button></li>
          </ol>

          <p class="art-result" aria-live="polite" data-result>Estas señales no sustituyen una auditoría. Ayudan a formular una pregunta mejor: <strong>¿qué necesita comprender el visitante para poder decidir?</strong></p>
        </section>

        <section id="cuando" aria-labelledby="h-cua">
          <span class="art-kicker art-micro">06</span>
          <h2 id="h-cua">
            <span class="art-line"><span>Cuándo tiene sentido</span></span>
            <span class="art-line"><span><em>para una marca.</em></span></span>
          </h2>

          <p data-rv>Es especialmente pertinente cuando una parte del valor del negocio necesita observarse y explicarse con cuidado:</p>

          <ul class="art-list">
            <li data-rv><strong>Clínicas</strong>, que deben ordenar especialidades, tecnología, profesionales y sedes para generar confianza antes de la consulta. <a href="https://a-estudio.co/clinicas/">Diseño web para clínicas</a></li>
            <li data-rv><strong>Joyería y producto premium</strong>, que necesitan mostrar el trabajo de una pieza antes de sus características. <a href="https://a-estudio.co/diseno-web-joyerias/">Diseño web para joyerías</a></li>
            <li data-rv><strong>Hoteles, beach clubs y restaurantes</strong>, que quieren transmitir la relación entre sus espacios y el lugar. <a href="https://a-estudio.co/hospitality/">Diseño web para hospitality</a></li>
            <li data-rv><strong>Estudios, marcas personales y negocios con varias líneas</strong>, cuya web presenta todo de la misma manera sin reflejar sus diferencias. <a href="https://a-estudio.co/diseno-web-estudios-arquitectura-interiorismo/">Diseño web para estudios de arquitectura</a></li>
          </ul>
        </section>

        <section id="movil" aria-labelledby="h-mov">
          <span class="art-kicker art-micro">07</span>
          <h2 id="h-mov">
            <span class="art-line"><span>Qué debe cambiar</span></span>
            <span class="art-line"><span><em>cuando la web se ve en móvil.</em></span></span>
          </h2>

          <p data-rv>Una composición editorial necesita adaptarse a la pantalla y a la forma de utilizarla. En móvil conviene revisar el orden del contenido, los recortes de las imágenes, los saltos de los titulares y la distancia entre bloques. Una relación visual que funciona en dos columnas puede necesitar otra secuencia en una pantalla estrecha.</p>

          <p data-rv>También deben revisarse las interacciones. Una información que aparece al pasar el cursor necesita una forma de acceso táctil. Un efecto de movimiento debe permitir leer y actuar con comodidad, y respetar a quienes prefieren reducir las animaciones. La identidad se mantiene aunque la composición cambie.</p>

          <aside class="art-aside" data-rv>
            <span class="art-micro">Cuándo contener la expresión visual</span>
            <p>Hay momentos en los que la prioridad es resolver una tarea con rapidez: localizar un tratamiento, consultar un envío, completar un formulario o pagar. Ahí el diseño debe reducir incertidumbre. <em>La sofisticación también se demuestra al saber dónde simplificar.</em></p>
          </aside>
        </section>

        <section id="seo" aria-labelledby="h-seo">
          <span class="art-kicker art-micro">08</span>
          <h2 id="h-seo">
            <span class="art-line"><span>Diseño web editorial y SEO:</span></span>
            <span class="art-line"><span><em>cómo conviven.</em></span></span>
          </h2>

          <p data-rv>El enfoque editorial es compatible con una web preparada para Google y para los asistentes de IA, siempre que:</p>

          <ul class="art-list art-list--tight">
            <li data-rv><strong>Los títulos describan el contenido.</strong> Una frase sugerente puede abrir una sección, pero el lector y el buscador deben encontrar qué servicio se ofrece, para quién y con qué alcance.</li>
            <li data-rv><strong>Lo importante esté en texto real</strong>, no solo dentro de imágenes o animaciones.</li>
            <li data-rv><strong>Los enlaces conecten páginas relacionadas</strong> con sentido.</li>
            <li data-rv><strong>El rendimiento no se sacrifique</strong> por la expresión visual: imágenes optimizadas y movimiento ligero.</li>
          </ul>

          <p data-rv>El diseño editorial no garantiza posiciones en Google ni menciones en asistentes de IA. Su aportación es organizar y presentar el contenido; la visibilidad requiere además trabajo técnico, relevancia y pruebas. Lo desarrollamos en la guía <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a>.</p>
        </section>

        <section id="preguntas" aria-labelledby="h-faq">
          <span class="art-kicker art-micro">09</span>
          <h2 id="h-faq">
            <span class="art-line"><span>Preguntas</span></span>
            <span class="art-line"><span><em>frecuentes.</em></span></span>
          </h2>

          <div class="art-faq">
            <details name="art-faq" open><summary><h3>¿Qué diferencia hay entre diseño editorial y diseño web editorial?</h3><i aria-hidden="true"></i></summary><div><p>El diseño editorial organiza la lectura de una publicación, impresa o digital cerrada. El diseño web editorial aplica sus principios —jerarquía, ritmo, relación entre texto e imagen— a una web que además debe permitir navegar, comparar y actuar en cualquier pantalla.</p></div></details>
            <details name="art-faq"><summary><h3>¿El diseño web editorial sirve para una tienda online?</h3><i aria-hidden="true"></i></summary><div><p>Sí. En ecommerce ayuda a presentar colecciones con intención y a construir fichas que sostienen la decisión, siempre que la búsqueda, los filtros, el carrito y el pago sigan siendo directos.</p></div></details>
            <details name="art-faq"><summary><h3>¿Una web editorial posiciona peor en Google?</h3><i aria-hidden="true"></i></summary><div><p>No, si los títulos describen el contenido, la información importante está en texto, los enlaces internos tienen sentido y la web carga rápido. El problema aparece cuando la expresión visual sustituye a la información en lugar de ordenarla.</p></div></details>
            <details name="art-faq"><summary><h3>¿Funciona el diseño web editorial en una clínica?</h3><i aria-hidden="true"></i></summary><div><p>Sí, y es uno de los sectores donde más aporta. Una clínica necesita ordenar tratamientos, tecnología, equipo médico y sedes sin convertir la web en un catálogo. En Clínica Guallar Espallargas, cada bloque abre con una idea médica antes de enumerar tratamientos, y la consulta llega como conclusión de la lectura.</p></div></details>
            <details name="art-faq"><summary><h3>¿Es lo mismo que una web con plantilla bonita?</h3><i aria-hidden="true"></i></summary><div><p>No. Una plantilla aplica la misma composición a cualquier contenido. La dirección editorial parte del contenido concreto de una marca y decide qué merece protagonismo, qué necesita explicación y qué puede desaparecer.</p></div></details>
          </div>

          <p class="art-related" data-rv>
            <span class="art-micro">Seguir leyendo</span>
            <a href="https://a-estudio.co/estudio-diseno-web-editorial/">Estudio de diseño web editorial</a>
            <a href="https://a-estudio.co/diseno-web-a-medida-vs-plantilla/">Diseño web a medida o plantilla</a>
            <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">Web preparada para Google y la IA</a>
            <a href="https://a-estudio.co/diseno-web-premium/">Diseño web premium a medida</a>
          </p>
        </section>
      </article>
    </div>
  </main>

  <section class="art-close" aria-labelledby="h-close">
    <div class="art-shell">
      <span class="art-micro">Una web editorial empieza por el contenido</span>
      <h2 id="h-close">
        <span class="art-line"><span>Si tu web ya no expresa</span></span>
        <span class="art-line"><span><em>el nivel de tu negocio.</em></span></span>
      </h2>

      <p data-rv>Antes de elegir tipografías o animaciones, hay que saber qué merece protagonismo, qué necesita explicación y qué puede desaparecer. Podemos empezar por revisar qué debería mostrar mejor tu web.</p>

      <a class="art-btn" href="https://a-estudio.co/contacto/" data-rv>
        <span>Cuéntanos tu proyecto</span>
        <span class="art-btn-mark" aria-hidden="true"></span>
      </a>
    </div>
  </section>
</div>

<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
            result.innerHTML=base;
          }else if(count === 1){
            result.innerHTML='Has marcado 1 señal. Úsala como punto de revisión: <strong>qué debe entender el visitante, qué debe ver primero y qué acción debe quedar clara.</strong>';
          }else{
            result.innerHTML='Has marcado '+count+' señales. No es un diagnóstico automático; es un mapa para revisar jerarquía, contenido, móvil y decisión. La pregunta sigue siendo la misma: <strong>¿qué necesita comprender el visitante para poder decidir?</strong>';
          }
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>

<script type="application/ld+json" id="ae-art1-schema">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://a-estudio.co/diseno-web-editorial/#schema-323255",
      "about": [
        {
          "@type": "Thing",
          "name": "Diseño web editorial"
        },
        {
          "@type": "Thing",
          "name": "Diseño editorial"
        }
      ],
      "mentions": [
        {
          "@type": "CreativeWork",
          "name": "Clínica Guallar Espallargas · Diseño web",
          "url": "https://a-estudio.co/clinica-guallar-espallargas/",
          "creator": {
            "@id": "https://a-estudio.co/#organization"
          }
        },
        {
          "@type": "CreativeWork",
          "name": "DLezcano · Diseño web y ecommerce",
          "url": "https://a-estudio.co/dlezcano/",
          "creator": {
            "@id": "https://a-estudio.co/#organization"
          }
        }
      ]
    },
    {
      "@type": "Person",
      "@id": "https://a-estudio.co/ainhoa-vazquez/#person",
      "name": "Ainhoa Vázquez",
      "url": "https://a-estudio.co/ainhoa-vazquez/",
      "jobTitle": "Fundadora y directora creativa",
      "worksFor": {
        "@id": "https://a-estudio.co/#organization"
      }
    },
    {
      "@type": "Organization",
      "@id": "https://a-estudio.co/#organization",
      "name": "A-ESTUDIO",
      "url": "https://a-estudio.co/",
      "founder": {
        "@id": "https://a-estudio.co/ainhoa-vazquez/#person"
      }
    },
    {
      "@type": "FAQPage",
      "@id": "https://a-estudio.co/diseno-web-editorial/#faq",
      "inLanguage": "es-ES",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "¿Qué diferencia hay entre diseño editorial y diseño web editorial?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "El diseño editorial organiza la lectura de una publicación, impresa o digital cerrada. El diseño web editorial aplica sus principios —jerarquía, ritmo, relación entre texto e imagen— a una web que además debe permitir navegar, comparar y actuar en cualquier pantalla."
          }
        },
        {
          "@type": "Question",
          "name": "¿El diseño web editorial sirve para una tienda online?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Sí. En ecommerce ayuda a presentar colecciones con intención y a construir fichas que sostienen la decisión, siempre que la búsqueda, los filtros, el carrito y el pago sigan siendo directos."
          }
        },
        {
          "@type": "Question",
          "name": "¿Una web editorial posiciona peor en Google?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "No, si los títulos describen el contenido, la información importante está en texto, los enlaces internos tienen sentido y la web carga rápido. El problema aparece cuando la expresión visual sustituye a la información en lugar de ordenarla."
          }
        },
        {
          "@type": "Question",
          "name": "¿Funciona el diseño web editorial en una clínica?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Sí, y es uno de los sectores donde más aporta. Una clínica necesita ordenar tratamientos, tecnología, equipo médico y sedes sin convertir la web en un catálogo. En Clínica Guallar Espallargas, cada bloque abre con una idea médica antes de enumerar tratamientos, y la consulta llega como conclusión de la lectura."
          }
        },
        {
          "@type": "Question",
          "name": "¿Es lo mismo que una web con plantilla bonita?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "No. Una plantilla aplica la misma composición a cualquier contenido. La dirección editorial parte del contenido concreto de una marca y decide qué merece protagonismo, qué necesita explicación y qué puede desaparecer."
          }
        }
      ]
    }
  ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-editorial/">Diseño web editorial</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Cómo atraer clientes que valoran la calidad</title>
		<link>https://a-estudio.co/como-atraer-clientes-que-valoran-la-calidad/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Tue, 11 Aug 2026 14:18:35 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=28635</guid>

					<description><![CDATA[<p>A-ESTUDIO by Ainhoa Vázquez Marca · Percepción Cómo atraer clientes que valoran la calidad. Atraer clientes que valoran la calidad exige alinear especialización, valor percibido, pruebas, experiencia y precio. Cuando todas esas señales cuentan la misma historia, la decisión deja de depender únicamente del coste. LecturaDirección de marca Publicación11.08.2026 Comenzar↓ Valor percibido·Especialización·Prueba·Coherencia·Confianza·Decisión· Valor percibido·Especialización·Prueba·Coherencia·Confianza·Decisión· En [&#8230;]</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/como-atraer-clientes-que-valoran-la-calidad/">Cómo atraer clientes que valoran la calidad</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-28635">.elementor-28635 .elementor-element.elementor-element-8346a73{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="28635" class="elementor elementor-28635" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-8346a73 e-con-full e-flex e-con e-parent" data-id="8346a73" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-641a5ce elementor-widget elementor-widget-html" data-id="641a5ce" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
======================================================================
A-ESTUDIO · ARTÍCULO EDITORIAL · v2.5 "PERCEPCIÓN Y VALOR" · ELEMENTOR PRO
Pegar TODO este archivo en un único widget HTML.

ENTRADA WORDPRESS
Título: Cómo atraer clientes que valoran la calidad
Slug: atraer-clientes-que-valoran-calidad
Categoría recomendada: Branding

RANK MATH
Palabra clave principal: atraer clientes que valoran la calidad
Palabras clave secundarias:
- cómo atraer clientes premium
- aumentar el valor percibido de una marca
- clientes que no deciden solo por precio
- posicionamiento de marca premium
- diferenciarse sin competir por precio

SEO title: Cómo atraer clientes que valoran la calidad | A-ESTUDIO
Meta description: Cómo construir una marca capaz de atraer clientes que
valoran la calidad, el criterio y la especialización sin competir únicamente
por precio.

Extracto: Atraer mejores clientes no empieza al vender. Empieza mucho antes:
en las señales de especialización, valor, confianza y coherencia que emite una
marca antes de la primera conversación.

El JSON-LD incluido es únicamente FAQPage. El schema Article debe configurarse
desde Rank Math para evitar duplicar el nodo principal del artículo.
Namespace exclusivo: .aeQual1 / --aeq1-* / data-aeq1-*
======================================================================
-->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap" rel="stylesheet">

<main class="aeQual1" data-aeq1-root>
  <div class="aeQual1__progress" aria-hidden="true"><span data-aeq1-progress></span></div>

  <article>
    <header class="aeQual1__hero" aria-labelledby="aeQual1-title">
      <div class="aeQual1__orb" aria-hidden="true"></div>
      <div class="aeQual1__wrap aeQual1__heroInner">
        <div class="aeQual1__eyebrow" data-aeq1-reveal>
          <span>A-ESTUDIO by Ainhoa Vázquez</span>
          <i aria-hidden="true"></i>
          <span>Marca · Percepción</span>
        </div>

        <h1 id="aeQual1-title" data-aeq1-reveal>
          Cómo atraer clientes<br>
          que valoran <em>la calidad.</em>
        </h1>

        <div class="aeQual1__heroGrid">
          <p class="aeQual1__lead" data-aeq1-reveal>
            Atraer clientes que valoran la calidad exige alinear especialización,
            valor percibido, pruebas, experiencia y precio. Cuando todas esas señales
            cuentan la misma historia, la decisión deja de depender únicamente del coste.
          </p>

          <div class="aeQual1__heroMeta" data-aeq1-reveal>
            <p><span>Lectura</span><strong>Dirección de marca</strong></p>
            <p><span>Publicación</span><strong>11.08.2026</strong></p>
            <a href="#idea-central"><span>Comenzar</span><span aria-hidden="true">↓</span></a>
          </div>
        </div>
      </div>

      <div class="aeQual1__ticker" aria-hidden="true">
        <div class="aeQual1__tickerTrack">
          <div class="aeQual1__tickerGroup">
            <span>Valor percibido</span><i>·</i><span>Especialización</span><i>·</i><span>Prueba</span><i>·</i><span>Coherencia</span><i>·</i><span>Confianza</span><i>·</i><span>Decisión</span><i>·</i>
          </div>
          <div class="aeQual1__tickerGroup">
            <span>Valor percibido</span><i>·</i><span>Especialización</span><i>·</i><span>Prueba</span><i>·</i><span>Coherencia</span><i>·</i><span>Confianza</span><i>·</i><span>Decisión</span><i>·</i>
          </div>
        </div>
      </div>
    </header>

    <section id="idea-central" class="aeQual1__opening">
      <div class="aeQual1__wrap aeQual1__openingGrid">
        <aside class="aeQual1__contents" data-aeq1-reveal aria-label="Índice del artículo">
          <p>En esta lectura</p>
          <a href="#precio">01 · Precio y percepción</a>
          <a href="#senales">02 · Las señales de calidad</a>
          <a href="#web">03 · La web como filtro</a>
          <a href="#prueba">04 · Prueba y autoridad</a>
          <a href="#aplicacion">05 · Qué cambiar</a>
        </aside>

        <div class="aeQual1__prose aeQual1__prose--opening" data-aeq1-reveal>
          <p class="aeQual1__drop">
            Hay marcas que preguntan cómo conseguir más clientes cuando la pregunta correcta
            es otra: qué tipo de cliente está invitando a entrar la marca que ya tienen.
          </p>
          <p>
            Una empresa puede ofrecer un trabajo excelente y, aun así, atraer conversaciones
            centradas en descuentos, comparaciones rápidas o presupuestos sin contexto. No
            siempre ocurre porque el mercado no entienda la calidad. A menudo ocurre porque
            la calidad existe dentro del negocio, pero todavía no se percibe con claridad desde fuera.
          </p>
          <p>
            El cliente que valora el criterio no necesita más adjetivos. Necesita señales. Quiere
            entender qué haces de forma diferente, cómo tomas decisiones, qué nivel de implicación
            puede esperar y qué pruebas sostienen la promesa. Antes de hablar contigo, ya está
            interpretando el lenguaje, la web, los casos, el proceso y hasta lo que decides omitir.
          </p>
        </div>
      </div>

      <div class="aeQual1__wrap">
        <aside class="aeQual1__answer" data-aeq1-reveal aria-label="Respuesta principal">
          <p>La idea esencial</p>
          <h2>Los clientes que valoran la calidad no se atraen afirmando que eres premium. Se atraen haciendo visible el criterio que justifica elegirte.</h2>
        </aside>
      </div>
    </section>

    <section id="precio" class="aeQual1__section aeQual1__section--paper">
      <div class="aeQual1__wrap">
        <div class="aeQual1__sectionHead" data-aeq1-reveal>
          <p><span>01</span> Precio y percepción</p>
          <p>La conversación empieza antes del presupuesto</p>
        </div>

        <div class="aeQual1__twoCol">
          <h2 data-aeq1-reveal>El problema no siempre es el precio.<br><em>Es la falta de razones.</em></h2>
          <div class="aeQual1__prose" data-aeq1-reveal>
            <p>
              Cuando dos propuestas parecen equivalentes, el precio se convierte en el criterio
              más fácil para compararlas. No porque el cliente sea incapaz de apreciar la calidad,
              sino porque la marca no le ha ofrecido otra forma de distinguirlas.
            </p>
            <p>
              Aumentar el valor percibido de una marca no consiste en decorar una oferta ni en
              envolverla con palabras grandilocuentes. Consiste en hacer comprensible la diferencia:
              el diagnóstico previo, la profundidad del proceso, la experiencia acumulada, el nivel
              de personalización, las decisiones que evitan errores y el resultado que todo ello protege.
            </p>
            <p>
              El precio deja de ocupar todo el espacio cuando el cliente entiende qué está comprando,
              qué riesgo reduce y por qué esa forma de trabajar no es intercambiable.
            </p>
          </div>
        </div>

        <div class="aeQual1__contrast" data-aeq1-reveal>
          <div>
            <span>Cuando falta percepción</span>
            <h3>“¿Cuánto cuesta?”</h3>
            <p>La oferta se interpreta como una suma de entregables comparables.</p>
          </div>
          <div>
            <span>Cuando existe valor</span>
            <h3>“¿Cómo trabajamos?”</h3>
            <p>La conversación avanza hacia encaje, criterio, proceso y resultado.</p>
          </div>
        </div>
      </div>
    </section>

    <section id="senales" class="aeQual1__section aeQual1__section--dark">
      <div class="aeQual1__wrap">
        <div class="aeQual1__sectionHead aeQual1__sectionHead--light" data-aeq1-reveal>
          <p><span>02</span> Las señales de calidad</p>
          <p>Lo que el cliente interpreta</p>
        </div>

        <div class="aeQual1__statement" data-aeq1-reveal>
          <h2>La calidad no se declara.<br><em>Se reconoce.</em></h2>
          <p>
            Cada punto de contacto confirma o contradice el posicionamiento. Una frase genérica,
            un caso sin contexto o un proceso que nadie logra comprender pueden rebajar la percepción
            de un trabajo que, en realidad, es excelente.
          </p>
        </div>

        <div class="aeQual1__signals">
          <article data-aeq1-reveal>
            <span>01</span>
            <h3>Especialización visible</h3>
            <p>No basta con servir a muchos sectores. El cliente debe reconocer cuándo tu experiencia encaja especialmente bien con su problema.</p>
          </article>
          <article data-aeq1-reveal>
            <span>02</span>
            <h3>Mensaje preciso</h3>
            <p>Una propuesta concreta transmite más autoridad que una lista extensa de capacidades. La claridad también demuestra dominio.</p>
          </article>
          <article data-aeq1-reveal>
            <span>03</span>
            <h3>Prueba contextualizada</h3>
            <p>Un resultado gana fuerza cuando explica el punto de partida, la decisión tomada y el cambio producido, no solo cuando muestra una imagen.</p>
          </article>
          <article data-aeq1-reveal>
            <span>04</span>
            <h3>Coherencia estética</h3>
            <p>Diseño, tono, ritmo y detalle deben sostener la misma promesa. La forma no sustituye al fondo; hace posible percibirlo.</p>
          </article>
          <article data-aeq1-reveal>
            <span>05</span>
            <h3>Proceso con criterio</h3>
            <p>Explicar cómo decides aporta más valor que enumerar fases. Un buen proceso demuestra que el resultado no depende de la improvisación.</p>
          </article>
          <article data-aeq1-reveal>
            <span>06</span>
            <h3>Límites claros</h3>
            <p>Decir para quién no es el servicio, qué no incluye o cuándo no conviene contratarlo puede aumentar la confianza y mejorar el encaje.</p>
          </article>
        </div>
      </div>
    </section>

    <aside class="aeQual1__quote" aria-label="Idea destacada">
      <div class="aeQual1__wrap" data-aeq1-reveal>
        <p>“Una marca atrae conversaciones del mismo nivel que las señales que proyecta.”</p>
        <span>A-ESTUDIO · Dirección de marca</span>
      </div>
    </aside>

    <section id="web" class="aeQual1__section aeQual1__section--cream">
      <div class="aeQual1__wrap">
        <div class="aeQual1__sectionHead" data-aeq1-reveal>
          <p><span>03</span> La web como filtro</p>
          <p>Entrar · Entender · Explorar · Decidir</p>
        </div>

        <div class="aeQual1__twoCol">
          <h2 data-aeq1-reveal>Tu web no solo capta demanda.<br><em>También la cualifica.</em></h2>
          <div class="aeQual1__prose" data-aeq1-reveal>
            <p>
              Una web estratégica no intenta convencer a todo el mundo. Ayuda al cliente adecuado
              a reconocerse, comprender la propuesta y avanzar con suficiente confianza. Al mismo
              tiempo, filtra expectativas que no encajan con el nivel, el proceso o la inversión.
            </p>
            <p>
              Por eso el diseño web para atraer clientes premium no puede limitarse a una estética
              cuidada. Necesita arquitectura de información, jerarquía, lenguaje, casos y llamadas
              a la acción pensadas como una secuencia de decisión.
            </p>
          </div>
        </div>

        <div class="aeQual1__journey">
          <article data-aeq1-reveal>
            <span>01</span>
            <h3>Entrar</h3>
            <p><strong>Debe sentir:</strong> “Este nivel encaja conmigo”.</p>
            <p><strong>Señal:</strong> una primera impresión propia, clara y coherente.</p>
          </article>
          <article data-aeq1-reveal>
            <span>02</span>
            <h3>Entender</h3>
            <p><strong>Debe pensar:</strong> “Comprenden el problema real”.</p>
            <p><strong>Señal:</strong> propuesta concreta, contexto y especialización.</p>
          </article>
          <article data-aeq1-reveal>
            <span>03</span>
            <h3>Explorar</h3>
            <p><strong>Debe comprobar:</strong> “Hay criterio detrás”.</p>
            <p><strong>Señal:</strong> casos explicados, método y decisiones visibles.</p>
          </article>
          <article data-aeq1-reveal>
            <span>04</span>
            <h3>Decidir</h3>
            <p><strong>Debe saber:</strong> “Este es el siguiente paso”.</p>
            <p><strong>Señal:</strong> una llamada a la acción clara y sin fricción.</p>
          </article>
        </div>

        <a class="aeQual1__inlineLink" href="https://a-estudio.co/diseno-web-premium/" data-aeq1-reveal>
          <span>Qué convierte una web en una experiencia premium</span><span aria-hidden="true"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2197.png" alt="↗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
        </a>
      </div>
    </section>

    <section id="prueba" class="aeQual1__section aeQual1__section--pink">
      <div class="aeQual1__wrap">
        <div class="aeQual1__sectionHead" data-aeq1-reveal>
          <p><span>04</span> Prueba y autoridad</p>
          <p>La confianza necesita evidencia</p>
        </div>

        <div class="aeQual1__twoCol">
          <h2 data-aeq1-reveal>Una promesa sin prueba<br><em>sigue siendo una promesa.</em></h2>
          <div class="aeQual1__prose" data-aeq1-reveal>
            <p>
              Las palabras “calidad”, “excelencia”, “personalizado” o “premium” aparecen en casi
              todos los sectores. Por sí solas ya no distinguen. La autoridad se construye cuando
              esas palabras encuentran una prueba que el cliente puede interpretar.
            </p>
            <p>
              Un portfolio bonito muestra sensibilidad. Un caso bien contado demuestra pensamiento.
              Un testimonio positivo genera cercanía. Un testimonio específico explica qué cambió.
              Una credencial aporta reputación. Una credencial enlazada y verificable aporta confianza.
            </p>
          </div>
        </div>

        <div class="aeQual1__proofGrid">
          <article data-aeq1-reveal>
            <p>Menos convincente</p>
            <h3>“Creamos marcas únicas.”</h3>
            <span>Promesa intercambiable.</span>
          </article>
          <article data-aeq1-reveal>
            <p>Más convincente</p>
            <h3>Explicar la decisión que hizo única a una marca.</h3>
            <span>Criterio observable.</span>
          </article>
          <article data-aeq1-reveal>
            <p>Menos convincente</p>
            <h3>Una galería sin contexto.</h3>
            <span>Resultado sin razonamiento.</span>
          </article>
          <article data-aeq1-reveal>
            <p>Más convincente</p>
            <h3>Problema, dirección, solución y resultado.</h3>
            <span>Caso que reduce incertidumbre.</span>
          </article>
        </div>

        <a class="aeQual1__inlineLink" href="https://a-estudio.co/proyectos/" data-aeq1-reveal>
          <span>Explorar obras seleccionadas de A-ESTUDIO</span><span aria-hidden="true"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2197.png" alt="↗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
        </a>
      </div>
    </section>

    <section id="aplicacion" class="aeQual1__section aeQual1__section--paper">
      <div class="aeQual1__wrap">
        <div class="aeQual1__sectionHead" data-aeq1-reveal>
          <p><span>05</span> Qué cambiar</p>
          <p>Del discurso a la experiencia</p>
        </div>

        <div class="aeQual1__twoCol">
          <h2 data-aeq1-reveal>Para dejar de competir<br><em>solo por precio.</em></h2>
          <div class="aeQual1__prose" data-aeq1-reveal>
            <p>
              El posicionamiento de marca premium no nace de subir precios de forma aislada. Nace
              de alinear lo que prometes, lo que demuestras, lo que entregas y la experiencia que
              rodea cada interacción.
            </p>
            <p>
              Si quieres diferenciarte sin competir por precio, empieza por revisar las señales
              que están tomando la decisión en tu lugar. No desde el gusto interno, sino desde lo
              que una persona puede comprender y verificar antes de conocerte.
            </p>
          </div>
        </div>

        <div class="aeQual1__audit" data-aeq1-reveal>
          <h3>Siete preguntas para revisar tu marca</h3>
          <ol>
            <li><span>01</span><p>¿Se entiende en una frase qué problema resuelves y para quién?</p></li>
            <li><span>02</span><p>¿Tu especialización aparece antes que tu lista de servicios?</p></li>
            <li><span>03</span><p>¿Tus casos explican decisiones o solo enseñan resultados?</p></li>
            <li><span>04</span><p>¿El proceso demuestra criterio o parece una secuencia genérica?</p></li>
            <li><span>05</span><p>¿Existen pruebas concretas junto a las promesas importantes?</p></li>
            <li><span>06</span><p>¿La experiencia digital sostiene el nivel que expresa el precio?</p></li>
            <li><span>07</span><p>¿Tu llamada a la acción invita al siguiente paso correcto?</p></li>
          </ol>
        </div>

        <div class="aeQual1__closingText" data-aeq1-reveal>
          <p>
            Atraer clientes que valoran la calidad empieza por hacer visible algo que no se puede fingir:
            <em>el criterio.</em>
          </p>
          <p>
            Cuando una marca consigue hacerlo visible, la conversación cambia. El precio deja de ser
            la única medida. Entran en juego la especialización, el proceso y la forma de pensar.
            Ahí nace una posición difícil de imitar: ser elegida no solo por lo que haces, sino por
            cómo decides hacerlo.
          </p>
        </div>
      </div>
    </section>

    <section class="aeQual1__faq" aria-labelledby="aeQual1-faq-title">
      <div class="aeQual1__wrap">
        <div class="aeQual1__sectionHead aeQual1__sectionHead--light" data-aeq1-reveal>
          <p><span>06</span> Preguntas frecuentes</p>
          <p>Marca, valor y captación</p>
        </div>

        <div class="aeQual1__faqIntro">
          <h2 id="aeQual1-faq-title" data-aeq1-reveal>Lo que conviene<br><em>tener claro.</em></h2>
        </div>

        <div class="aeQual1__faqList" data-aeq1-reveal>
          <details>
            <summary><span>¿Cómo atraer clientes que valoran la calidad?</span><i aria-hidden="true"></i></summary>
            <div><p>Haz visible la especialización, explica el criterio detrás del proceso, presenta pruebas concretas y crea una experiencia coherente con el nivel de la oferta. La calidad debe poder comprenderse antes de contratar.</p></div>
          </details>
          <details>
            <summary><span>¿Una imagen premium permite cobrar más?</span><i aria-hidden="true"></i></summary>
            <div><p>La imagen puede elevar la percepción inicial, pero no sostiene por sí sola un precio mayor. Debe estar respaldada por una propuesta clara, un proceso sólido, resultados verificables y una experiencia consistente.</p></div>
          </details>
          <details>
            <summary><span>¿Cómo dejar de competir únicamente por precio?</span><i aria-hidden="true"></i></summary>
            <div><p>Evita que tu oferta parezca intercambiable. Explica qué decisiones tomas, qué riesgos reduces, qué experiencia aportas y qué resultado protege tu manera de trabajar. Cuanto más clara es la diferencia, menos domina el precio.</p></div>
          </details>
          <details>
            <summary><span>¿Qué debe mostrar una web para atraer clientes premium?</span><i aria-hidden="true"></i></summary>
            <div><p>Debe mostrar una propuesta precisa, especialización, casos con contexto, metodología, autoridad verificable, expectativas claras y una llamada a la acción proporcionada al tipo de decisión que se solicita.</p></div>
          </details>
          <details>
            <summary><span>¿Es conveniente publicar los precios?</span><i aria-hidden="true"></i></summary>
            <div><p>Depende de la complejidad del servicio y de cuánto varíe el alcance. Un precio cerrado puede simplificar ofertas estandarizadas; un rango o inversión mínima puede cualificar servicios estratégicos sin reducirlos a una cifra aislada.</p></div>
          </details>
          <details>
            <summary><span>¿Qué diferencia una marca cara de una marca valiosa?</span><i aria-hidden="true"></i></summary>
            <div><p>Una marca cara exige una inversión alta. Una marca valiosa permite entender por qué esa inversión tiene sentido: aporta criterio, reduce incertidumbre, ofrece una experiencia coherente y demuestra la calidad prometida.</p></div>
          </details>
        </div>
      </div>
    </section>

    <aside class="aeQual1__author" aria-label="Sobre la autora">
      <div class="aeQual1__wrap aeQual1__authorGrid">
        <img loading="lazy"
          src="https://a-estudio.co/wp-content/uploads/2026/05/ainhoa-ceo-de-a-estudio.webp"
          alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO"
          width="720" height="900" loading="lazy" decoding="async">
        <div data-aeq1-reveal>
          <p class="aeQual1__authorLabel">Dirección editorial</p>
          <h2>Ainhoa Vázquez</h2>
          <p>
            Fundadora y directora creativa de A-ESTUDIO. Dirige proyectos de marca,
            identidad y diseño web estratégico para negocios que necesitan elevar su
            percepción, reputación y capacidad de ser elegidos. Jurado de los ADG
            Premios Laus 2026 en categorías digitales.
          </p>
          <a href="https://a-estudio.co/ainhoa-vazquez/"><span>Conocer su trayectoria</span><span aria-hidden="true"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2197.png" alt="↗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span></a>
        </div>
      </div>
    </aside>

    <footer class="aeQual1__cta">
      <div class="aeQual1__wrap aeQual1__ctaInner">
        <p data-aeq1-reveal>A-ESTUDIO · Dirección de marca y diseño web estratégico</p>
        <h2 data-aeq1-reveal>Si tu negocio tiene más valor<br>del que hoy <em>se percibe.</em></h2>
        <p class="aeQual1__ctaCopy" data-aeq1-reveal>
          Trabajamos la estrategia, el mensaje, la identidad y la experiencia digital
          para convertir valor real en una presencia capaz de sostenerlo.
        </p>
        <a href="https://a-estudio.co/contacto/" data-aeq1-reveal>
          <span>Contarnos tu proyecto</span><span aria-hidden="true"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2197.png" alt="↗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
        </a>
      </div>
    </footer>
  </article>
</main>

<style>
  html:has(.aeQual1), body:has(.aeQual1) { overflow-x: clip !important; }

  .elementor-widget-html:has(.aeQual1),
  .elementor-widget-html:has(.aeQual1) > .elementor-widget-container,
  .elementor-element:has(.aeQual1) > .elementor-widget-wrap,
  .elementor-element:has(.aeQual1) > .elementor-widget-wrap > .elementor-widget-html,
  .e-con:has(.aeQual1), .e-con-inner:has(.aeQual1),
  .elementor-widget-wrap:has(.aeQual1) {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important;
    contain: none !important;
  }

  .aeQual1 {
    --aeq1-ink: #202221;
    --aeq1-dark: #2a2c2b;
    --aeq1-olive: #383a38;
    --aeq1-olive2: #5f5a33;
    --aeq1-cream: #f2f3ee;
    --aeq1-paper: #dcddd4;
    --aeq1-soft: #e4e6dd;
    --aeq1-band: #c9cdc0;
    --aeq1-pink: #ffb6e3;
    --aeq1-pink2: #ffb6e3;
    --aeq1-pink-deep: #a34a85;
    --aeq1-gold: #cbc064;
    --aeq1-line: rgba(32,34,33,.13);
    --aeq1-lightline: rgba(241,240,236,.19);
    --aeq1-serif: 'Newsreader', 'Newsreader', Georgia, serif;
    --aeq1-sans: 'AE Gh16 Silka', "Helvetica Neue", Arial, sans-serif;
    --aeq1-mono: 'AE Gh16 Silka', ui-monospace, SFMono-Regular, Menlo, monospace;
    --aeq1-script: "La Belle Aurore", "Bradley Hand", "Segoe Print", cursive;
    --aeq1-ease: cubic-bezier(.16,1,.3,1);
    --aeq1-measure: 66ch;
    --aeq1-measure-medium: 58ch;
    --aeq1-measure-narrow: 48ch;
    --aeq1-max: 1560px;
    width: 100%; position: relative; overflow: clip;
    color: var(--aeq1-ink); background: var(--aeq1-cream);
    font-family: var(--aeq1-sans);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }

  .aeQual1 *, .aeQual1 *::before, .aeQual1 *::after { box-sizing: border-box; }
  .aeQual1 * { min-width: 0; }
  .aeQual1 h1, .aeQual1 h2, .aeQual1 h3, .aeQual1 p, .aeQual1 figure { margin: 0; }
  .aeQual1 a { color: inherit; text-decoration: none; }
  .aeQual1 img { display: block; max-width: 100%; }
  .aeQual1__wrap { width: min(100%, var(--aeq1-max)); margin-inline: auto; padding-inline: clamp(24px,4.6vw,96px); }
  .aeQual1__progress { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; }
  .aeQual1__progress span { display: block; width: 100%; height: 100%; background: var(--aeq1-pink); transform: scaleX(0); transform-origin: left center; }

  [data-aeq1-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.2,1); }
  [data-aeq1-reveal].is-visible { opacity: 1; transform: none; }

  .aeQual1__hero { min-height: 940px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--aeq1-dark); color: var(--aeq1-cream); }
  .aeQual1__orb { position: absolute; width: min(62vw, 950px); aspect-ratio: 1; right: -17%; top: -31%; border-radius: 50%; background: radial-gradient(circle at 48% 52%, rgba(243,169,215,.32), rgba(243,169,215,.08) 45%, transparent 70%); filter: blur(4px); pointer-events: none; }
  .aeQual1__heroInner { position: relative; z-index: 1; padding: 150px 0 110px; }
  .aeQual1__eyebrow { display: flex; align-items: center; gap: 18px; text-transform: uppercase; font-size: 12px; line-height: 1; letter-spacing: .16em; }
  .aeQual1__eyebrow i { width: 42px; height: 1px; background: currentColor; opacity: .55; }
  .aeQual1__hero h1 { max-width: 1320px; margin-top: 105px !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(70px, 8.9vw, 142px); line-height: .88; letter-spacing: -.052em; font-weight: 300; }
  .aeQual1__hero h1 em, .aeQual1 h2 em { color: var(--aeq1-pink); font-weight: 300; }
  .aeQual1__heroGrid { margin-top: 96px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.65fr); gap: 12vw; align-items: end; }
  .aeQual1__lead { max-width: 780px; font-size: clamp(20px,1.65vw,27px); line-height: 1.42; letter-spacing: -.018em; }
  .aeQual1__heroMeta { border-top: 1px solid var(--aeq1-lightline); }
  .aeQual1__heroMeta p { min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--aeq1-lightline); display: flex; justify-content: space-between; gap: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }
  .aeQual1__heroMeta p span { opacity: .56; }
  .aeQual1__heroMeta strong { font-weight:400; text-align: right; }
  .aeQual1__heroMeta a { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; }

  .aeQual1__ticker { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--aeq1-lightline); background: var(--aeq1-pink); color: var(--aeq1-ink); }
  .aeQual1__tickerTrack { width: max-content; display: flex; animation: aeq1Ticker 28s linear infinite; will-change: transform; }
  .aeQual1__tickerGroup { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; padding: 18px 12px; }
  .aeQual1__ticker span { font-family: 'Newsreader', Georgia, serif; font-size: 18px; line-height: 1; font-style: italic; white-space: nowrap; }
  .aeQual1__ticker i { font-style: normal; opacity: .55; }
  @keyframes aeq1Ticker { to { transform: translateX(-50%); } }

  .aeQual1__opening { padding: 150px 0 140px; }
  .aeQual1__openingGrid { display: grid; grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr); gap: 9vw; align-items: start; }
  .aeQual1__contents { position: sticky; top: 110px; padding-top: 11px; border-top: 1px solid var(--aeq1-line); display: grid; }
  .aeQual1__contents p { margin-bottom: 30px !important; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; opacity: .58; }
  .aeQual1__contents a { padding: 13px 0; border-bottom: 1px solid var(--aeq1-line); font-size: 13px; line-height: 1.3; transition: padding-left .25s ease; }
  .aeQual1__contents a:hover { padding-left: 8px; }
  .aeQual1__prose { min-width: 0; }
  .aeQual1__prose p { font-size: clamp(18px,1.45vw,23px); line-height: 1.58; letter-spacing: -.014em; }
  .aeQual1__prose p + p { margin-top: 25px !important; }
  .aeQual1__prose--opening { max-width: 920px; }
  .aeQual1__prose--opening .aeQual1__drop { font-family: 'Newsreader', Georgia, serif; font-size: clamp(38px,4vw,66px); line-height: 1.04; letter-spacing: -.037em; font-weight: 300; }
  .aeQual1__prose--opening .aeQual1__drop + p { margin-top: 60px !important; }
  .aeQual1__answer { margin-top: 120px; padding: 68px 7vw 72px; background: var(--aeq1-olive); color: var(--aeq1-cream); }
  .aeQual1__answer > p { margin-bottom: 38px !important; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; opacity: .65; }
  .aeQual1__answer h2 { max-width: 1170px; font-family: 'Newsreader', Georgia, serif; font-size: clamp(42px,5vw,80px); line-height: 1; letter-spacing: -.04em; font-weight: 300; }

  .aeQual1__section { padding: 150px 0; }
  .aeQual1__section--paper { background: var(--aeq1-paper); }
  .aeQual1__section--cream { background: var(--aeq1-cream); }
  .aeQual1__section--dark { background: var(--aeq1-dark); color: var(--aeq1-cream); }
  .aeQual1__section--pink { background: var(--aeq1-pink2); }
  .aeQual1__sectionHead { padding-bottom: 18px; border-bottom: 1px solid var(--aeq1-line); display: flex; justify-content: space-between; gap: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
  .aeQual1__sectionHead p span { margin-right: 20px; opacity: .5; }
  .aeQual1__sectionHead p:last-child { opacity: .5; text-align: right; }
  .aeQual1__sectionHead--light { border-color: var(--aeq1-lightline); }
  .aeQual1__twoCol { margin-top: 95px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); gap: 8vw; align-items: start; }
  .aeQual1__twoCol > h2, .aeQual1__statement h2 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(54px,6vw,94px); line-height: .95; letter-spacing: -.045em; font-weight: 300; }

  .aeQual1__contrast { margin-top: 105px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--aeq1-line); }
  .aeQual1__contrast > div { min-width: 0; min-height: 330px; padding: 45px; display: flex; flex-direction: column; }
  .aeQual1__contrast > div + div { border-left: 1px solid var(--aeq1-line); background: var(--aeq1-pink); }
  .aeQual1__contrast span { font-size: 12px; text-transform: uppercase; letter-spacing: .13em; opacity: .55; }
  .aeQual1__contrast h3 { margin-top: auto !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(44px,4vw,66px); font-weight: 300; letter-spacing: -.04em; }
  .aeQual1__contrast p { max-width: 450px; margin-top: 20px !important; font-size: 15px; line-height: 1.5; }

  .aeQual1__statement { margin-top: 95px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 8vw; align-items: end; }
  .aeQual1__statement > p { max-width: 600px; font-size: clamp(18px,1.45vw,23px); line-height: 1.58; }
  .aeQual1__signals { margin-top: 100px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--aeq1-lightline); border-left: 1px solid var(--aeq1-lightline); }
  .aeQual1__signals article { min-width: 0; min-height: 355px; padding: 36px; border-right: 1px solid var(--aeq1-lightline); border-bottom: 1px solid var(--aeq1-lightline); display: flex; flex-direction: column; }
  .aeQual1__signals article > span { font-size: 12px; letter-spacing: .12em; opacity: .5; }
  .aeQual1__signals h3 { margin-top: auto !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(34px,2.6vw,45px); line-height: 1.02; font-weight: 300; letter-spacing: -.03em; }
  .aeQual1__signals p { margin-top: 24px !important; font-size: 15px; line-height: 1.55; opacity: .72; }

  .aeQual1__quote { padding: 150px 0; background: var(--aeq1-olive); color: var(--aeq1-cream); text-align: center; }
  .aeQual1__quote p { max-width: 1240px; margin-inline: auto !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(54px,7.2vw,112px); line-height: .94; letter-spacing: -.045em; font-weight: 300; }
  .aeQual1__quote span { display: block; margin-top: 50px; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; opacity: .58; }

  .aeQual1__journey { margin-top: 100px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--aeq1-line); border-left: 1px solid var(--aeq1-line); }
  .aeQual1__journey article { min-width: 0; min-height: 380px; padding: 32px; border-right: 1px solid var(--aeq1-line); border-bottom: 1px solid var(--aeq1-line); }
  .aeQual1__journey article > span { font-size: 12px; letter-spacing: .12em; opacity: .48; }
  .aeQual1__journey h3 { margin: 100px 0 35px !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(42px,3.5vw,57px); font-weight: 300; letter-spacing: -.04em; }
  .aeQual1__journey p { font-size: 14px; line-height: 1.5; }
  .aeQual1__journey p + p { margin-top: 18px !important; }
  .aeQual1__journey strong { font-weight:400; }
  .aeQual1__inlineLink { margin-top: 48px; padding: 22px 0; border-top: 1px solid var(--aeq1-line); border-bottom: 1px solid var(--aeq1-line); display: flex; justify-content: space-between; gap: 24px; font-size: 13px; text-transform: uppercase; letter-spacing: .11em; }

  .aeQual1__proofGrid { margin-top: 105px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--aeq1-line); border-left: 1px solid var(--aeq1-line); }
  .aeQual1__proofGrid article { min-width: 0; min-height: 310px; padding: 42px; border-right: 1px solid var(--aeq1-line); border-bottom: 1px solid var(--aeq1-line); display: flex; flex-direction: column; }
  .aeQual1__proofGrid article:nth-child(even) { background: rgba(241,238,229,.45); }
  .aeQual1__proofGrid p { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; opacity: .55; }
  .aeQual1__proofGrid h3 { max-width: 610px; margin-top: auto !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(36px,3vw,52px); line-height: 1.04; font-weight: 300; letter-spacing: -.035em; }
  .aeQual1__proofGrid span { margin-top: 22px; font-size: 14px; opacity: .62; }

  .aeQual1__audit { margin-top: 110px; padding: 60px; background: var(--aeq1-cream); }
  .aeQual1__audit h3 { margin-bottom: 50px !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(42px,4.3vw,68px); font-weight: 300; letter-spacing: -.04em; }
  .aeQual1__audit ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--aeq1-line); }
  .aeQual1__audit li { padding: 21px 0; border-bottom: 1px solid var(--aeq1-line); display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 15px; align-items: baseline; }
  .aeQual1__audit li span { font-size: 12px; letter-spacing: .12em; opacity: .5; }
  .aeQual1__audit li p { font-size: clamp(18px,1.7vw,26px); line-height: 1.35; letter-spacing: -.015em; }
  .aeQual1__closingText { max-width: 980px; margin: 110px 0 0 auto; }
  .aeQual1__closingText p { font-family: 'Newsreader', Georgia, serif; font-size: clamp(34px,3.4vw,54px); line-height: 1.13; letter-spacing: -.032em; font-weight: 300; }
  .aeQual1__closingText p + p { margin-top: 45px !important; }

  .aeQual1__faq { padding: 150px 0; background: var(--aeq1-dark); color: var(--aeq1-cream); }
  .aeQual1__faqIntro h2 { margin-top: 90px !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(60px,7vw,108px); line-height: .92; letter-spacing: -.045em; font-weight: 300; }
  .aeQual1__faqList { margin-top: 85px; border-top: 1px solid var(--aeq1-lightline); }
  .aeQual1__faq details { width: 100%; min-width: 0; border-bottom: 1px solid var(--aeq1-lightline); }
  .aeQual1__faq summary { width: 100%; min-width: 0; padding: 29px 0; display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 30px; align-items: center; cursor: pointer; list-style: none; }
  .aeQual1__faq summary::-webkit-details-marker { display: none; }
  .aeQual1__faq summary span { min-width: 0; font-family: 'Newsreader', Georgia, serif; font-size: clamp(28px,2.5vw,40px); line-height: 1.08; letter-spacing: -.025em; overflow-wrap: anywhere; word-break: normal; }
  .aeQual1__faq summary i { position: relative; width: 30px; height: 30px; justify-self: end; }
  .aeQual1__faq summary i::before, .aeQual1__faq summary i::after { content: ""; position: absolute; left: 4px; top: 14px; width: 22px; height: 1px; background: currentColor; transition: transform .25s ease; }
  .aeQual1__faq summary i::after { transform: rotate(90deg); }
  .aeQual1__faq details[open] summary i::after { transform: rotate(0deg); }
  .aeQual1__faq details > div { max-width: 920px; padding: 0 68px 34px 0; }
  .aeQual1__faq details > div p { font-size: clamp(17px,1.25vw,20px); line-height: 1.58; opacity: .7; }

  .aeQual1__author { padding: 130px 0; background: var(--aeq1-paper); }
  .aeQual1__authorGrid { display: grid; grid-template-columns: minmax(280px,.65fr) minmax(0,1.35fr); gap: 8vw; align-items: center; }
  .aeQual1__author img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.84); }
  .aeQual1__authorLabel { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; opacity: .55; }
  .aeQual1__author h2 { margin: 45px 0 32px !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(54px,6vw,92px); line-height: .92; font-weight: 300; letter-spacing: -.045em; }
  .aeQual1__authorGrid > div > p:not(.aeQual1__authorLabel) { max-width: 740px; font-size: clamp(18px,1.35vw,22px); line-height: 1.57; }
  .aeQual1__author a { max-width: 740px; margin-top: 45px; padding: 19px 0; border-top: 1px solid var(--aeq1-line); border-bottom: 1px solid var(--aeq1-line); display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }

  .aeQual1__cta { position: relative; padding: 170px 0 180px; overflow: hidden; background: var(--aeq1-olive); color: var(--aeq1-cream); text-align: center; }
  .aeQual1__cta::before { content: "VALUE"; position: absolute; left: 50%; top: 51%; transform: translate(-50%,-50%); font-family: 'Newsreader', Georgia, serif; font-size: 24vw; line-height: .7; color: rgba(241,238,229,.035); pointer-events: none; }
  .aeQual1__ctaInner { position: relative; z-index: 1; }
  .aeQual1__ctaInner > p:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; opacity: .65; }
  .aeQual1__cta h2 { margin-top: 58px !important; font-family: 'Newsreader', Georgia, serif; font-size: clamp(58px,7.4vw,116px); line-height: .91; letter-spacing: -.047em; font-weight: 300; }
  .aeQual1__ctaCopy { max-width: 720px; margin: 55px auto 0 !important; font-size: clamp(18px,1.35vw,22px); line-height: 1.55; }
  .aeQual1__cta a { width: min(100%,420px); margin: 55px auto 0; padding: 21px 25px; border: 1px solid rgba(241,238,229,.42); display: flex; justify-content: space-between; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; transition: background .25s ease, color .25s ease; }
  .aeQual1__cta a:hover { background: var(--aeq1-cream); color: var(--aeq1-ink); }

  /* =========================================================
     A-ESTUDIO · SISTEMA DE IDENTIDAD v2
     Dirección derivada de la landing maestra: escala contenida,
     contraste mineral, rosa como interrupción y aire editorial.
  ========================================================= */
  .aeQual1::after {
    content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none;
    opacity: .022; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  }

  .aeQual1 :is(.aeQual1__hero h1,.aeQual1__answer h2,.aeQual1__twoCol>h2,
    .aeQual1__statement h2,.aeQual1__contrast h3,.aeQual1__signals h3,
    .aeQual1__quote p,.aeQual1__journey h3,.aeQual1__proofGrid h3,
    .aeQual1__audit h3,.aeQual1__closingText p,.aeQual1__faqIntro h2,
    .aeQual1__faq summary span,.aeQual1__author h2,.aeQual1__cta h2,
    .aeQual1__prose--opening .aeQual1__drop) {
    font-family: var(--aeq1-serif) !important;
    font-weight: 300 !important;
    text-wrap: balance;
  }

  .aeQual1 :is(.aeQual1__eyebrow,.aeQual1__heroMeta,.aeQual1__contents p,
    .aeQual1__sectionHead,.aeQual1__answer>p,.aeQual1__contrast span,
    .aeQual1__signals article>span,.aeQual1__quote span,.aeQual1__proofGrid p,
    .aeQual1__audit li span,.aeQual1__authorLabel,.aeQual1__ctaInner>p:first-child) {
    font-family: var(--aeq1-mono) !important;
  }

  .aeQual1__hero {
    min-height: 100svh; isolation: isolate;
    background:
      linear-gradient(90deg, rgba(32,34,33,.99) 0 64%, rgba(42,44,43,.94) 64% 100%),
      var(--aeq1-dark);
  }
  .aeQual1__hero::before {
    content: ""; position: absolute; inset: clamp(12px,1.3vw,24px); z-index: 2;
    border: 1px solid rgba(241,240,236,.13); pointer-events: none;
  }
  .aeQual1__hero::after {
    content: "la percepción decide"; position: absolute; z-index: 3;
    right: clamp(42px,6vw,110px); top: clamp(92px,10vw,155px);
    color: var(--aeq1-pink); font-family: var(--aeq1-script); font-size: clamp(20px,2vw,34px);
    line-height: 1; transform: rotate(-7deg); opacity: .95; pointer-events: none;
  }
  .aeQual1__orb {
    width: min(45vw,700px); right: -10%; top: 10%; filter: none;
    background: radial-gradient(circle at 45% 50%, rgba(203,192,100,.18), rgba(255,182,227,.07) 42%, transparent 69%);
  }
  .aeQual1__heroInner { padding-top: clamp(130px,13vw,205px); padding-bottom: clamp(90px,9vw,145px); }
  .aeQual1__eyebrow { font-size: 12px; line-height: 1.35; font-weight:400; letter-spacing: .17em; }
  .aeQual1__hero h1 {
    max-width: 12.5ch; margin-top: clamp(90px,10vw,155px) !important;
    font-size: clamp(54px,7vw,112px); line-height: .92; letter-spacing: -.03em;
  }
  .aeQual1__hero h1 em { position: relative; color: var(--aeq1-cream); font-style: italic; }
  .aeQual1__hero h1 em::after {
    content: ""; display: block; height: 1px; width: 100%; margin-top: .08em;
    background: var(--aeq1-pink);
  }
  .aeQual1__heroGrid { margin-top: clamp(70px,7.5vw,118px); grid-template-columns: minmax(0,1.18fr) minmax(280px,.42fr); gap: clamp(50px,7vw,125px); }
  .aeQual1__lead { max-width: 52ch; font-size: clamp(18px,1.3vw,23px); line-height: 1.48; font-weight: 420; }
  .aeQual1__heroMeta { padding: clamp(26px,2.4vw,40px); border: 1px solid var(--aeq1-lightline); background: rgba(241,240,236,.045); backdrop-filter: blur(12px); }
  .aeQual1__heroMeta p { font-family: var(--aeq1-mono); font-size: 12px; letter-spacing: .13em; }
  .aeQual1__heroMeta a { font-family: var(--aeq1-mono); font-size: 12px; letter-spacing: .14em; }

  .aeQual1__ticker { border: 0; background: var(--aeq1-pink); }
  .aeQual1__tickerTrack { animation-duration: 34s; }
  .aeQual1__tickerGroup { gap: 0; padding: clamp(22px,2.2vw,32px) 0; }
  .aeQual1__ticker span { padding-left: clamp(28px,3vw,50px); font-family: var(--aeq1-serif); font-size: clamp(22px,2vw,32px); font-style: normal; }
  .aeQual1__ticker i { margin-left: clamp(28px,3vw,50px); width: 5px; height: 5px; overflow: hidden; border-radius: 50%; background: var(--aeq1-ink); color: transparent; opacity: .65; }

  .aeQual1__opening, .aeQual1__section, .aeQual1__faq { padding-block: clamp(112px,12.5vw,208px); }
  .aeQual1__opening { background: var(--aeq1-paper); }
  .aeQual1__contents { border-color: var(--aeq1-line); }
  .aeQual1__contents a { font-size: 14px; }
  .aeQual1__prose p { max-width: 62ch; font-size: clamp(16px,1.02vw,18px); line-height: 1.68; font-weight: 420; letter-spacing: -.008em; }
  .aeQual1__prose--opening .aeQual1__drop { max-width: 18ch; font-size: clamp(38px,3.9vw,64px); line-height: 1.02; letter-spacing: -.026em; }
  .aeQual1__answer { margin-top: clamp(90px,10vw,155px); padding: clamp(42px,5vw,80px); background: var(--aeq1-band); color: var(--aeq1-ink); border-left: 1px solid var(--aeq1-pink-deep); }
  .aeQual1__answer>p { color: rgba(32,34,33,.46); }
  .aeQual1__answer h2 { max-width: 24ch; font-size: clamp(34px,3.5vw,58px); line-height: 1; letter-spacing: -.026em; }

  .aeQual1__section--paper { background: var(--aeq1-soft); }
  .aeQual1__section--cream { background: var(--aeq1-cream); }
  .aeQual1__section--dark { background: var(--aeq1-ink); }
  .aeQual1__section--pink { background: var(--aeq1-gold); }
  .aeQual1__sectionHead {
    display: grid; grid-template-columns: minmax(140px,.26fr) minmax(0,1fr);
    align-items: start; gap: clamp(34px,6vw,110px); padding-bottom: 0; border-bottom: 0;
  }
  .aeQual1__sectionHead p { padding-top: 13px; border-top: 1px solid currentColor; opacity: .58; }
  .aeQual1__sectionHead p:last-child { max-width: none; text-align: left; opacity: .38; }
  .aeQual1__sectionHead p span { color: var(--aeq1-pink-deep); opacity: 1; }
  .aeQual1__sectionHead--light p span { color: var(--aeq1-pink); }
  .aeQual1__twoCol, .aeQual1__statement { margin-top: clamp(80px,9vw,145px); }
  .aeQual1__twoCol>h2, .aeQual1__statement h2 { font-size: clamp(34px,3.5vw,58px); line-height: 1; letter-spacing: -.026em; }
  .aeQual1 h2 em { color: var(--aeq1-pink-deep); font-style: italic; }
  .aeQual1__section--dark h2 em { color: var(--aeq1-pink); }

  .aeQual1__contrast { border-color: var(--aeq1-line); }
  .aeQual1__contrast>div { min-height: 390px; padding: clamp(30px,3.5vw,56px); }
  .aeQual1__contrast>div+div { background: var(--aeq1-pink); }
  .aeQual1__contrast h3 { font-size: clamp(30px,3vw,50px); letter-spacing: -.026em; }
  .aeQual1__signals { border-color: var(--aeq1-lightline); }
  .aeQual1__signals article { min-height: 410px; padding: clamp(30px,3vw,48px); }
  .aeQual1__signals h3 { font-size: clamp(23px,1.95vw,31px); line-height: 1.06; letter-spacing: -.022em; }
  .aeQual1__signals p { font-size: 15px; line-height: 1.68; }

  .aeQual1__quote { padding-block: clamp(120px,13vw,210px); background: var(--aeq1-pink); color: var(--aeq1-ink); }
  .aeQual1__quote p { max-width: 26ch; font-size: clamp(38px,4.6vw,76px); line-height: .98; letter-spacing: -.028em; }
  .aeQual1__quote span { color: rgba(32,34,33,.58); }

  .aeQual1__journey article { min-height: 420px; }
  .aeQual1__journey h3 { font-size: clamp(28px,2.6vw,42px); letter-spacing: -.026em; }
  .aeQual1__proofGrid article { min-height: 390px; }
  .aeQual1__proofGrid article:nth-child(even) { background: rgba(242,243,238,.35); }
  .aeQual1__proofGrid h3 { font-size: clamp(28px,2.65vw,44px); }
  .aeQual1__inlineLink { font-family: var(--aeq1-mono); font-size: 12px; font-weight:400; letter-spacing: .15em; }

  .aeQual1__audit { background: var(--aeq1-cream); padding: clamp(36px,5vw,82px); }
  .aeQual1__audit h3 { font-size: clamp(34px,3.5vw,58px); }
  .aeQual1__closingText p { font-size: clamp(30px,3vw,50px); line-height: 1.06; }

  .aeQual1__faq { background: var(--aeq1-paper); color: var(--aeq1-ink); }
  .aeQual1__faq .aeQual1__sectionHead--light { border-color: var(--aeq1-line); }
  .aeQual1__faq .aeQual1__sectionHead--light p span { color: var(--aeq1-pink-deep); }
  .aeQual1__faqIntro h2 { font-size: clamp(40px,4.8vw,78px); line-height: .96; letter-spacing: -.028em; }
  .aeQual1__faqList { border-color: var(--aeq1-line); }
  .aeQual1__faq details { border-color: var(--aeq1-line); }
  .aeQual1__faq summary { padding: clamp(25px,2.5vw,39px) 0; }
  .aeQual1__faq summary span { font-size: clamp(20px,1.75vw,28px); line-height: 1.18; letter-spacing: -.022em; }
  .aeQual1__faq summary i { border: 1px solid var(--aeq1-line); border-radius: 50%; }
  .aeQual1__faq details>div p { font-size: 16px; line-height: 1.7; color: rgba(32,34,33,.74); opacity: 1; }

  .aeQual1__author { background: var(--aeq1-soft); }
  .aeQual1__author h2 { font-size: clamp(40px,4.5vw,72px); }
  .aeQual1__author img { filter: saturate(.55) contrast(1.04); }
  .aeQual1__cta { background: var(--aeq1-ink); }
  .aeQual1__cta::before { content: "PERCEPCIÓN"; font-size: 18vw; color: rgba(241,240,236,.025); }
  .aeQual1__cta h2 { font-size: clamp(44px,5.9vw,94px); letter-spacing: -.03em; }
  .aeQual1__cta h2 em { color: var(--aeq1-pink); }
  .aeQual1__cta a { font-family: var(--aeq1-mono); font-size: 12px; }

  @media (max-width: 1024px) {
    .aeQual1__wrap { width: min(100%, var(--aeq1-max)); padding-inline: clamp(28px,5vw,56px); }
    .aeQual1__hero { min-height: 860px; }
    .aeQual1__heroGrid, .aeQual1__twoCol, .aeQual1__statement { gap: 6vw; }
    .aeQual1__signals { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aeQual1__journey { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }

  @media (max-width: 767px) {
    .aeQual1__wrap { width: 100%; padding-inline: 20px; }
    .aeQual1__hero { min-height: auto; background: var(--aeq1-ink); }
    .aeQual1__hero::before { inset: 10px; }
    .aeQual1__hero::after { right: 28px; top: 88px; font-size: 21px; }
    .aeQual1__heroInner { padding: 130px 0 82px; }
    .aeQual1__eyebrow { gap: 11px; font-size: 12px; letter-spacing: .12em; }
    .aeQual1__eyebrow i { width: 20px; }
    .aeQual1__hero h1 { max-width: 11ch; margin-top: 88px !important; font-size: clamp(42px,11.8vw,64px); line-height: .93; letter-spacing: -.026em; overflow-wrap: normal; }
    .aeQual1__heroGrid { margin-top: 64px; grid-template-columns: 1fr; gap: 48px; }
    .aeQual1__lead { font-size: 19px; line-height: 1.5; }
    .aeQual1__tickerGroup { gap: 0; padding-block: 18px; }
    .aeQual1__ticker span { padding-left: 25px; font-size: 20px; }
    .aeQual1__ticker i { margin-left: 25px; }

    .aeQual1__opening, .aeQual1__section, .aeQual1__faq { padding: 100px 0; }
    .aeQual1__openingGrid { grid-template-columns: 1fr; gap: 60px; }
    .aeQual1__contents { position: static; }
    .aeQual1__prose--opening .aeQual1__drop { font-size: 40px; }
    .aeQual1__prose--opening .aeQual1__drop + p { margin-top: 42px !important; }
    .aeQual1__prose p { font-size: 18px; }
    .aeQual1__answer { margin-top: 75px; padding: 38px 25px 42px; }
    .aeQual1__answer h2 { font-size: 39px; line-height: 1.04; }

    .aeQual1__sectionHead { grid-template-columns: 62px minmax(0,1fr); gap: 24px; align-items: flex-start; }
    .aeQual1__sectionHead p:last-child { max-width: none; }
    .aeQual1__twoCol, .aeQual1__statement { margin-top: 62px; grid-template-columns: 1fr; gap: 42px; }
    .aeQual1__twoCol > h2, .aeQual1__statement h2 { font-size: clamp(36px,9.5vw,50px); line-height: 1; }
    .aeQual1__contrast { margin-top: 70px; grid-template-columns: 1fr; }
    .aeQual1__contrast > div { min-height: 275px; padding: 29px; }
    .aeQual1__contrast > div + div { border-left: 0; border-top: 1px solid var(--aeq1-line); }
    .aeQual1__signals { margin-top: 70px; grid-template-columns: 1fr; }
    .aeQual1__signals article { min-height: 300px; padding: 29px; }
    .aeQual1__signals h3 { font-size: 27px; }

    .aeQual1__quote { padding: 100px 0; }
    .aeQual1__quote p { font-size: 42px; line-height: 1; }
    .aeQual1__journey { margin-top: 70px; grid-template-columns: 1fr; }
    .aeQual1__journey article { min-height: 310px; padding: 29px; }
    .aeQual1__journey h3 { margin-top: 75px !important; }
    .aeQual1__inlineLink { font-size: 12px; line-height: 1.4; }
    .aeQual1__proofGrid { margin-top: 70px; grid-template-columns: 1fr; }
    .aeQual1__proofGrid article { min-height: 280px; padding: 29px; }
    .aeQual1__audit { margin-top: 70px; padding: 36px 22px; }
    .aeQual1__audit h3 { font-size: 39px; }
    .aeQual1__audit li { grid-template-columns: 40px minmax(0,1fr); }
    .aeQual1__audit li p { font-size: 18px; }
    .aeQual1__closingText { margin-top: 75px; }
    .aeQual1__closingText p { font-size: 35px; }

    .aeQual1__faqIntro h2 { margin-top: 62px !important; font-size: 45px; }
    .aeQual1__faqList { margin-top: 60px; }
    .aeQual1__faq summary { padding: 24px 0; grid-template-columns: minmax(0,1fr) 30px; gap: 16px; align-items: start; }
    .aeQual1__faq summary span { font-size: clamp(20px,5.4vw,24px); line-height: 1.18; letter-spacing: -.018em; overflow-wrap: break-word; }
    .aeQual1__faq summary i { width: 26px; height: 26px; margin-top: 2px; }
    .aeQual1__faq summary i::before, .aeQual1__faq summary i::after { left: 3px; top: 12px; width: 20px; }
    .aeQual1__faq details > div { padding: 0 38px 28px 0; }
    .aeQual1__faq details > div p { font-size: 17px; }

    .aeQual1__author { padding: 90px 0; }
    .aeQual1__authorGrid { grid-template-columns: 1fr; gap: 55px; }
    .aeQual1__author img { max-height: 610px; }
    .aeQual1__author h2 { font-size: 48px; }
    .aeQual1__cta { padding: 110px 0 120px; }
    .aeQual1__cta h2 { font-size: 48px; line-height: .97; }
    .aeQual1__ctaCopy { font-size: 18px; }
  }

  @media (max-width: 420px) {
    .aeQual1__wrap { width: 100%; padding-inline: 16px; }
    .aeQual1__hero h1 { font-size: clamp(38px,11.2vw,46px); line-height: .95; }
    .aeQual1__hero h1 br { display: none; }
    .aeQual1__heroMeta p { font-size: 12px; }
    .aeQual1__twoCol > h2, .aeQual1__statement h2 { font-size: 37px; }
    .aeQual1__sectionHead { grid-template-columns: 1fr; gap: 18px; font-size: 12px; }
    .aeQual1__sectionHead p span { margin-right: 8px; }
    .aeQual1__faq summary span { font-size: 20px; }
    .aeQual1__faq details > div { padding-right: 18px; }
    .aeQual1__cta h2 { font-size: 42px; }
  }

  /* =========================================================
     BLINDAJE ELEMENTOR · CONTRASTE + RITMO TIPOGRÁFICO
  ========================================================= */
  body .elementor .aeQual1 :is(.aeQual1__hero,.aeQual1__section--dark,.aeQual1__cta),
  body .elementor .aeQual1 :is(.aeQual1__hero,.aeQual1__section--dark,.aeQual1__cta) :is(h1,h2,h3,h4,p,span,strong,em,a,b,i,small,li),
  body .aeQual1 :is(.aeQual1__hero,.aeQual1__section--dark,.aeQual1__cta),
  body .aeQual1 :is(.aeQual1__hero,.aeQual1__section--dark,.aeQual1__cta) :is(h1,h2,h3,h4,p,span,strong,em,a,b,i,small,li) {
    color: #f1f0ec !important;
    -webkit-text-fill-color: #f1f0ec !important;
  }

  body .elementor .aeQual1 .aeQual1__hero::after,
  body .aeQual1 .aeQual1__hero::after {
    color: var(--aeq1-pink) !important;
    -webkit-text-fill-color: var(--aeq1-pink) !important;
  }
  body .elementor .aeQual1 :is(.aeQual1__section--dark,.aeQual1__cta) h2 em,
  body .aeQual1 :is(.aeQual1__section--dark,.aeQual1__cta) h2 em,
  body .elementor .aeQual1 .aeQual1__section--dark .aeQual1__sectionHead p span,
  body .aeQual1 .aeQual1__section--dark .aeQual1__sectionHead p span {
    color: var(--aeq1-pink) !important;
    -webkit-text-fill-color: var(--aeq1-pink) !important;
  }
  body .elementor .aeQual1 .aeQual1__hero h1 em,
  body .aeQual1 .aeQual1__hero h1 em {
    color: #f1f0ec !important;
    -webkit-text-fill-color: #f1f0ec !important;
  }

  /* CONTRATO DE COLOR · los bloques claros y cromáticos no heredan blanco del hero */
  body .elementor .aeQual1 :is(.aeQual1__ticker,.aeQual1__quote,.aeQual1__section--pink,
    .aeQual1__answer,.aeQual1__contrast>div+div),
  body .elementor .aeQual1 :is(.aeQual1__ticker,.aeQual1__quote,.aeQual1__section--pink,
    .aeQual1__answer,.aeQual1__contrast>div+div) :is(h1,h2,h3,h4,p,span,strong,em,a,b,small,li),
  body .aeQual1 :is(.aeQual1__ticker,.aeQual1__quote,.aeQual1__section--pink,
    .aeQual1__answer,.aeQual1__contrast>div+div),
  body .aeQual1 :is(.aeQual1__ticker,.aeQual1__quote,.aeQual1__section--pink,
    .aeQual1__answer,.aeQual1__contrast>div+div) :is(h1,h2,h3,h4,p,span,strong,em,a,b,small,li) {
    color: var(--aeq1-ink) !important;
    -webkit-text-fill-color: var(--aeq1-ink) !important;
  }

  /* MARQUESINA · tinta mineral obligatoria, incluida cuando vive dentro del hero */
  body .elementor .aeQual1 .aeQual1__ticker,
  body .elementor .aeQual1 .aeQual1__ticker *,
  body .aeQual1 .aeQual1__ticker,
  body .aeQual1 .aeQual1__ticker * {
    color: var(--aeq1-ink) !important;
    -webkit-text-fill-color: var(--aeq1-ink) !important;
  }
  body .elementor .aeQual1 .aeQual1__ticker i,
  body .aeQual1 .aeQual1__ticker i {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: var(--aeq1-ink) !important;
  }

  /* WATERMARK FINAL · presencia, no titular */
  body .elementor .aeQual1 .aeQual1__cta::before,
  body .aeQual1 .aeQual1__cta::before {
    color: rgba(241,240,236,.032) !important;
    -webkit-text-fill-color: rgba(241,240,236,.032) !important;
    font-family: var(--aeq1-serif) !important;
    font-weight: 300 !important;
    opacity: 1 !important;
    white-space: nowrap;
  }

  /* JERARQUÍAS SECUNDARIAS EN OSCURO · blancas pero no planas */
  body .elementor .aeQual1 :is(.aeQual1__heroMeta p span,.aeQual1__section--dark .aeQual1__sectionHead p,
    .aeQual1__section--dark .aeQual1__signals p,.aeQual1__ctaInner>p:first-child),
  body .aeQual1 :is(.aeQual1__heroMeta p span,.aeQual1__section--dark .aeQual1__sectionHead p,
    .aeQual1__section--dark .aeQual1__signals p,.aeQual1__ctaInner>p:first-child) {
    color: rgba(241,240,236,.68) !important;
    -webkit-text-fill-color: rgba(241,240,236,.68) !important;
    opacity: 1 !important;
  }
  body .elementor .aeQual1 .aeQual1__section--dark .aeQual1__sectionHead p:last-child,
  body .aeQual1 .aeQual1__section--dark .aeQual1__sectionHead p:last-child {
    color: rgba(241,240,236,.48) !important;
    -webkit-text-fill-color: rgba(241,240,236,.48) !important;
  }

  .aeQual1__hero h1 {
    line-height: .95 !important;
    letter-spacing: -.03em !important;
  }
  .aeQual1__lead {
    line-height: 1.5 !important;
    letter-spacing: -.014em !important;
  }
  .aeQual1__heroMeta p { line-height: 1.65 !important; }

  .aeQual1__prose {
    display: grid !important;
    gap: 20px !important;
  }
  .aeQual1__prose p {
    line-height: 1.68 !important;
    letter-spacing: -.008em !important;
  }
  .aeQual1__prose p + p { margin-top: 0 !important; }
  .aeQual1__prose--opening .aeQual1__drop {
    line-height: 1.02 !important;
    letter-spacing: -.026em !important;
  }
  .aeQual1__prose--opening .aeQual1__drop + p {
    margin-top: clamp(24px,2.4vw,34px) !important;
  }

  .aeQual1__answer h2,
  .aeQual1__twoCol > h2,
  .aeQual1__statement h2 {
    line-height: 1 !important;
    letter-spacing: -.026em !important;
  }
  .aeQual1__answer > p { margin-bottom: clamp(24px,2.4vw,38px) !important; }
  .aeQual1__twoCol { align-items: start; }

  .aeQual1__contrast h3,
  .aeQual1__signals h3,
  .aeQual1__journey h3,
  .aeQual1__proofGrid h3 {
    line-height: 1.06 !important;
    letter-spacing: -.022em !important;
  }
  .aeQual1__contrast p,
  .aeQual1__signals p,
  .aeQual1__journey p,
  .aeQual1__proofGrid span {
    line-height: 1.6 !important;
  }
  .aeQual1__signals p { margin-top: 14px !important; }
  .aeQual1__journey p + p { margin-top: 14px !important; }
  .aeQual1__proofGrid span { margin-top: 16px; }

  .aeQual1__quote p {
    line-height: 1 !important;
    letter-spacing: -.028em !important;
  }
  .aeQual1__audit h3 { line-height: 1.02 !important; }
  .aeQual1__audit li p { line-height: 1.5 !important; }
  .aeQual1__closingText {
    display: grid;
    gap: clamp(30px,3.4vw,48px);
  }
  .aeQual1__closingText p {
    line-height: 1.06 !important;
    letter-spacing: -.026em !important;
  }
  .aeQual1__closingText p + p { margin-top: 0 !important; }

  .aeQual1__faqIntro h2 {
    line-height: 1 !important;
    letter-spacing: -.026em !important;
  }
  .aeQual1__faq summary span {
    line-height: 1.14 !important;
    letter-spacing: -.022em !important;
  }
  .aeQual1__faq details > div p {
    line-height: 1.7 !important;
  }
  .aeQual1__author h2 { line-height: 1 !important; }
  .aeQual1__authorGrid > div > p:not(.aeQual1__authorLabel) { line-height: 1.68 !important; }
  .aeQual1__cta h2 {
    line-height: .98 !important;
    letter-spacing: -.03em !important;
  }
  .aeQual1__ctaCopy { line-height: 1.6 !important; }

  @media (max-width: 767px) {
    .aeQual1__hero h1 { line-height: 1 !important; letter-spacing: -.026em !important; }
    .aeQual1__lead { line-height: 1.55 !important; }
    .aeQual1__prose { gap: 18px !important; }
    .aeQual1__prose p { line-height: 1.68 !important; }
    .aeQual1__prose--opening .aeQual1__drop { line-height: 1.04 !important; }
    .aeQual1__answer h2,
    .aeQual1__twoCol > h2,
    .aeQual1__statement h2 { line-height: 1.04 !important; }
    .aeQual1__signals h3,
    .aeQual1__journey h3,
    .aeQual1__proofGrid h3 { line-height: 1.08 !important; }
    .aeQual1__quote p { line-height: 1.02 !important; }
    .aeQual1__faq summary span { line-height: 1.18 !important; }
    .aeQual1__cta h2 { line-height: 1.02 !important; }
  }

  /* =========================================================
     ESCALA EDITORIAL FINAL · MISMAS PROPORCIONES A-ESTUDIO
     El aire sustituye al tamaño. Esta capa prevalece sobre
     Elementor y sobre cualquier declaración anterior.
  ========================================================= */
  body .aeQual1 .aeQual1__hero h1,
  body .elementor .aeQual1 .aeQual1__hero h1 {
    font-size: clamp(50px,5.9vw,104px) !important;
    line-height: .95 !important;
    letter-spacing: -.03em !important;
    max-width: 13ch !important;
  }
  body .aeQual1 .aeQual1__lead,
  body .elementor .aeQual1 .aeQual1__lead {
    font-size: clamp(19px,1.3vw,23px) !important;
    line-height: 1.46 !important;
    max-width: 52ch !important;
  }
  body .aeQual1 .aeQual1__ticker span,
  body .elementor .aeQual1 .aeQual1__ticker span {
    font-size: clamp(20px,1.7vw,29px) !important;
    line-height: 1 !important;
  }
  body .aeQual1 .aeQual1__prose p,
  body .elementor .aeQual1 .aeQual1__prose p {
    font-size: clamp(16px,1.02vw,18px) !important;
    line-height: 1.68 !important;
  }
  body .aeQual1 .aeQual1__prose--opening .aeQual1__drop,
  body .elementor .aeQual1 .aeQual1__prose--opening .aeQual1__drop {
    font-size: clamp(30px,3vw,50px) !important;
    line-height: 1.04 !important;
    max-width: 20ch !important;
  }

  body .aeQual1 :is(.aeQual1__answer h2,.aeQual1__twoCol>h2,.aeQual1__statement h2,
    .aeQual1__audit h3,.aeQual1__faqIntro h2,.aeQual1__author h2,.aeQual1__cta h2),
  body .elementor .aeQual1 :is(.aeQual1__answer h2,.aeQual1__twoCol>h2,.aeQual1__statement h2,
    .aeQual1__audit h3,.aeQual1__faqIntro h2,.aeQual1__author h2,.aeQual1__cta h2) {
    font-size: clamp(34px,3.5vw,58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.026em !important;
  }
  body .aeQual1 :is(.aeQual1__contrast h3,.aeQual1__signals h3,
    .aeQual1__journey h3,.aeQual1__proofGrid h3),
  body .elementor .aeQual1 :is(.aeQual1__contrast h3,.aeQual1__signals h3,
    .aeQual1__journey h3,.aeQual1__proofGrid h3) {
    font-size: clamp(23px,1.95vw,31px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.022em !important;
  }
  body .aeQual1 .aeQual1__quote p,
  body .elementor .aeQual1 .aeQual1__quote p,
  body .aeQual1 .aeQual1__closingText p,
  body .elementor .aeQual1 .aeQual1__closingText p {
    font-size: clamp(30px,3vw,50px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.026em !important;
  }
  body .aeQual1 .aeQual1__quote p,
  body .elementor .aeQual1 .aeQual1__quote p { max-width: 23ch !important; }

  body .aeQual1 :is(.aeQual1__contrast p,.aeQual1__signals p,
    .aeQual1__journey p,.aeQual1__proofGrid span),
  body .elementor .aeQual1 :is(.aeQual1__contrast p,.aeQual1__signals p,
    .aeQual1__journey p,.aeQual1__proofGrid span) {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  body .aeQual1 .aeQual1__audit li p,
  body .elementor .aeQual1 .aeQual1__audit li p,
  body .aeQual1 .aeQual1__authorGrid>div>p:not(.aeQual1__authorLabel),
  body .elementor .aeQual1 .aeQual1__authorGrid>div>p:not(.aeQual1__authorLabel),
  body .aeQual1 .aeQual1__ctaCopy,
  body .elementor .aeQual1 .aeQual1__ctaCopy {
    font-size: clamp(16px,1.02vw,18px) !important;
    line-height: 1.68 !important;
  }
  body .aeQual1 .aeQual1__faq summary span,
  body .elementor .aeQual1 .aeQual1__faq summary span {
    font-size: clamp(20px,1.75vw,28px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.022em !important;
  }
  body .aeQual1 .aeQual1__faq details>div p,
  body .elementor .aeQual1 .aeQual1__faq details>div p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  @media (max-width:620px) {
    body .aeQual1 .aeQual1__hero h1,
    body .elementor .aeQual1 .aeQual1__hero h1 {
      font-size: clamp(35px,10.2vw,52px) !important;
      line-height: 1 !important;
      letter-spacing: -.026em !important;
      max-width: 12ch !important;
    }
    body .aeQual1 .aeQual1__lead,
    body .elementor .aeQual1 .aeQual1__lead {
      font-size: 18.5px !important;
      line-height: 1.5 !important;
    }
    body .aeQual1 .aeQual1__prose p,
    body .elementor .aeQual1 .aeQual1__prose p {
      font-size: 16.5px !important;
      line-height: 1.68 !important;
    }
    body .aeQual1 .aeQual1__prose--opening .aeQual1__drop,
    body .elementor .aeQual1 .aeQual1__prose--opening .aeQual1__drop,
    body .aeQual1 :is(.aeQual1__answer h2,.aeQual1__twoCol>h2,.aeQual1__statement h2,
      .aeQual1__audit h3,.aeQual1__faqIntro h2,.aeQual1__author h2,.aeQual1__cta h2),
    body .elementor .aeQual1 :is(.aeQual1__answer h2,.aeQual1__twoCol>h2,.aeQual1__statement h2,
      .aeQual1__audit h3,.aeQual1__faqIntro h2,.aeQual1__author h2,.aeQual1__cta h2) {
      font-size: clamp(30px,8.4vw,42px) !important;
      line-height: 1.04 !important;
    }
    body .aeQual1 :is(.aeQual1__contrast h3,.aeQual1__signals h3,
      .aeQual1__journey h3,.aeQual1__proofGrid h3),
    body .elementor .aeQual1 :is(.aeQual1__contrast h3,.aeQual1__signals h3,
      .aeQual1__journey h3,.aeQual1__proofGrid h3) {
      font-size: clamp(23px,6.3vw,27px) !important;
      line-height: 1.08 !important;
    }
    body .aeQual1 .aeQual1__quote p,
    body .elementor .aeQual1 .aeQual1__quote p,
    body .aeQual1 .aeQual1__closingText p,
    body .elementor .aeQual1 .aeQual1__closingText p {
      font-size: clamp(28px,8vw,38px) !important;
      line-height: 1.04 !important;
    }
    body .aeQual1 .aeQual1__faq summary span,
    body .elementor .aeQual1 .aeQual1__faq summary span {
      font-size: clamp(18.5px,5.2vw,23px) !important;
      line-height: 1.18 !important;
    }
    body .aeQual1 .aeQual1__faq details>div p,
    body .elementor .aeQual1 .aeQual1__faq details>div p {
      font-size: 15.5px !important;
    }
    body .aeQual1 :is(.aeQual1__audit li p,.aeQual1__ctaCopy),
    body .elementor .aeQual1 :is(.aeQual1__audit li p,.aeQual1__ctaCopy) {
      font-size: 16.5px !important;
    }
  }

  @media (max-width:390px) {
    body .aeQual1 .aeQual1__hero h1,
    body .elementor .aeQual1 .aeQual1__hero h1 {
      font-size: clamp(32px,10vw,42px) !important;
    }
    body .aeQual1 .aeQual1__faq summary span,
    body .elementor .aeQual1 .aeQual1__faq summary span {
      font-size: 18px !important;
    }
  }

  /* =========================================================
     MEDIDA EDITORIAL · LA COLUMNA SE DEFINE EN CARACTERES
     66ch para lectura sostenida; 48–58ch para apoyos.
  ========================================================= */
  body .aeQual1 :is(.aeQual1__prose,.aeQual1__prose--opening),
  body .elementor .aeQual1 :is(.aeQual1__prose,.aeQual1__prose--opening) {
    width: min(100%, var(--aeq1-measure)) !important;
    max-width: var(--aeq1-measure) !important;
    justify-self: start;
  }
  body .aeQual1 .aeQual1__prose p,
  body .elementor .aeQual1 .aeQual1__prose p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    text-wrap: pretty;
    hanging-punctuation: first last;
  }
  body .aeQual1 .aeQual1__lead,
  body .elementor .aeQual1 .aeQual1__lead {
    width: min(100%,52ch) !important;
    max-width: 52ch !important;
    text-wrap: pretty;
  }
  body .aeQual1 .aeQual1__statement>p,
  body .elementor .aeQual1 .aeQual1__statement>p {
    width: min(100%,var(--aeq1-measure-medium)) !important;
    max-width: var(--aeq1-measure-medium) !important;
    text-wrap: pretty;
  }
  body .aeQual1 .aeQual1__contrast p,
  body .elementor .aeQual1 .aeQual1__contrast p {
    width: min(100%,40ch) !important;
    max-width: 40ch !important;
  }
  body .aeQual1 .aeQual1__signals p,
  body .elementor .aeQual1 .aeQual1__signals p {
    width: min(100%,36ch) !important;
    max-width: 36ch !important;
  }
  body .aeQual1 .aeQual1__journey p,
  body .elementor .aeQual1 .aeQual1__journey p {
    width: min(100%,34ch) !important;
    max-width: 34ch !important;
  }
  body .aeQual1 .aeQual1__proofGrid span,
  body .elementor .aeQual1 .aeQual1__proofGrid span {
    width: min(100%,44ch) !important;
    max-width: 44ch !important;
  }
  body .aeQual1 .aeQual1__audit li p,
  body .elementor .aeQual1 .aeQual1__audit li p {
    width: min(100%,60ch) !important;
    max-width: 60ch !important;
    text-wrap: pretty;
  }
  body .aeQual1 .aeQual1__closingText,
  body .elementor .aeQual1 .aeQual1__closingText {
    width: min(100%,28ch) !important;
    max-width: 28ch !important;
  }
  body .aeQual1 .aeQual1__faq details>div,
  body .elementor .aeQual1 .aeQual1__faq details>div {
    width: min(100%,var(--aeq1-measure)) !important;
    max-width: var(--aeq1-measure) !important;
  }
  body .aeQual1 .aeQual1__faq details>div p,
  body .elementor .aeQual1 .aeQual1__faq details>div p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    text-wrap: pretty;
  }
  body .aeQual1 .aeQual1__authorGrid>div>p:not(.aeQual1__authorLabel),
  body .elementor .aeQual1 .aeQual1__authorGrid>div>p:not(.aeQual1__authorLabel) {
    width: min(100%,60ch) !important;
    max-width: 60ch !important;
    text-wrap: pretty;
  }
  body .aeQual1 .aeQual1__ctaCopy,
  body .elementor .aeQual1 .aeQual1__ctaCopy {
    width: min(100%,var(--aeq1-measure-medium)) !important;
    max-width: var(--aeq1-measure-medium) !important;
    text-wrap: pretty;
  }

  @media (max-width:620px) {
    body .aeQual1 :is(.aeQual1__prose,.aeQual1__prose--opening,
      .aeQual1__statement>p,.aeQual1__faq details>div,
      .aeQual1__authorGrid>div>p:not(.aeQual1__authorLabel),.aeQual1__ctaCopy),
    body .elementor .aeQual1 :is(.aeQual1__prose,.aeQual1__prose--opening,
      .aeQual1__statement>p,.aeQual1__faq details>div,
      .aeQual1__authorGrid>div>p:not(.aeQual1__authorLabel),.aeQual1__ctaCopy) {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  /* CIERRE EDITORIAL · UNA IDEA PROTAGONISTA, UNA IDEA DE APOYO */
  body .aeQual1 .aeQual1__closingText,
  body .elementor .aeQual1 .aeQual1__closingText {
    width: min(100%,36ch) !important;
    max-width: 36ch !important;
    gap: clamp(26px,3vw,42px) !important;
  }
  body .aeQual1 .aeQual1__closingText p:first-child,
  body .elementor .aeQual1 .aeQual1__closingText p:first-child {
    width: min(100%,24ch) !important;
    max-width: 24ch !important;
    font-size: clamp(30px,2.8vw,44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.026em !important;
    text-wrap: balance;
  }
  body .aeQual1 .aeQual1__closingText p:first-child em,
  body .elementor .aeQual1 .aeQual1__closingText p:first-child em {
    color: var(--aeq1-pink-deep) !important;
    -webkit-text-fill-color: var(--aeq1-pink-deep) !important;
    font-style: italic !important;
  }
  body .aeQual1 .aeQual1__closingText p:last-child,
  body .elementor .aeQual1 .aeQual1__closingText p:last-child {
    width: min(100%,36ch) !important;
    max-width: 36ch !important;
    font-size: clamp(21px,1.75vw,28px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.018em !important;
    color: rgba(32,34,33,.72) !important;
    -webkit-text-fill-color: rgba(32,34,33,.72) !important;
    text-wrap: pretty;
  }
  @media (max-width:620px) {
    body .aeQual1 .aeQual1__closingText,
    body .elementor .aeQual1 .aeQual1__closingText {
      width: 100% !important;
      max-width: 100% !important;
      gap: 24px !important;
    }
    body .aeQual1 .aeQual1__closingText p:first-child,
    body .elementor .aeQual1 .aeQual1__closingText p:first-child {
      font-size: clamp(30px,8vw,38px) !important;
      line-height: 1.05 !important;
      max-width: 22ch !important;
    }
    body .aeQual1 .aeQual1__closingText p:last-child,
    body .elementor .aeQual1 .aeQual1__closingText p:last-child {
      font-size: clamp(19px,5.5vw,23px) !important;
      line-height: 1.28 !important;
      max-width: 34ch !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .aeQual1 *, .aeQual1 *::before, .aeQual1 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-aeq1-reveal] { opacity: 1; transform: none; }
  }
</style>

<script>
(() => {
  const root = document.querySelector('[data-aeq1-root]');
  if (!root || root.dataset.ready === '1') return;
  root.dataset.ready = '1';

  const progress = root.querySelector('[data-aeq1-progress]');
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const updateProgress = () => {
    if (!progress) return;
    const article = root.querySelector('article');
    const rect = article.getBoundingClientRect();
    const distance = Math.max(1, article.offsetHeight - window.innerHeight);
    const passed = Math.min(distance, Math.max(0, -rect.top));
    progress.style.transform = `scaleX(${passed / distance})`;
  };

  updateProgress();
  window.addEventListener('scroll', updateProgress, { passive: true });
  window.addEventListener('resize', updateProgress, { passive: true });

  const revealItems = root.querySelectorAll('[data-aeq1-reveal]');
  if (reduceMotion || !('IntersectionObserver' in window)) {
    revealItems.forEach(item => item.classList.add('is-visible'));
  } else {
    const observer = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add('is-visible');
        obs.unobserve(entry.target);
      });
    }, { threshold: .08, rootMargin: '0px 0px -5% 0px' });
    revealItems.forEach(item => observer.observe(item));
  }
})();
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "¿Cómo atraer clientes que valoran la calidad?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Haz visible la especialización, explica el criterio detrás del proceso, presenta pruebas concretas y crea una experiencia coherente con el nivel de la oferta. La calidad debe poder comprenderse antes de contratar."
      }
    },
    {
      "@type": "Question",
      "name": "¿Una imagen premium permite cobrar más?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "La imagen puede elevar la percepción inicial, pero no sostiene por sí sola un precio mayor. Debe estar respaldada por una propuesta clara, un proceso sólido, resultados verificables y una experiencia consistente."
      }
    },
    {
      "@type": "Question",
      "name": "¿Cómo dejar de competir únicamente por precio?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Evita que tu oferta parezca intercambiable. Explica qué decisiones tomas, qué riesgos reduces, qué experiencia aportas y qué resultado protege tu manera de trabajar. Cuanto más clara es la diferencia, menos domina el precio."
      }
    },
    {
      "@type": "Question",
      "name": "¿Qué debe mostrar una web para atraer clientes premium?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Debe mostrar una propuesta precisa, especialización, casos con contexto, metodología, autoridad verificable, expectativas claras y una llamada a la acción proporcionada al tipo de decisión que se solicita."
      }
    },
    {
      "@type": "Question",
      "name": "¿Es conveniente publicar los precios?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Depende de la complejidad del servicio y de cuánto varíe el alcance. Un precio cerrado puede simplificar ofertas estandarizadas; un rango o inversión mínima puede cualificar servicios estratégicos sin reducirlos a una cifra aislada."
      }
    },
    {
      "@type": "Question",
      "name": "¿Qué diferencia una marca cara de una marca valiosa?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Una marca cara exige una inversión alta. Una marca valiosa permite entender por qué esa inversión tiene sentido: aporta criterio, reduce incertidumbre, ofrece una experiencia coherente y demuestra la calidad prometida."
      }
    }
  ]
}
</script>				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/como-atraer-clientes-que-valoran-la-calidad/">Cómo atraer clientes que valoran la calidad</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>diseño web a medida vs plantilla</title>
		<link>https://a-estudio.co/diseno-web-a-medida-vs-plantilla/</link>
		
		<dc:creator><![CDATA[Ainhoa Vázquez]]></dc:creator>
		<pubDate>Fri, 31 Jul 2026 15:25:11 +0000</pubDate>
				<category><![CDATA[Diseño web]]></category>
		<guid isPermaLink="false">https://a-estudio.co/?p=28361</guid>

					<description><![CDATA[<p>A-ESTUDIO / Ideas / Diseño web Diseño web a medida o plantilla: qué necesita realmente tu marca. Una plantilla basta cuando validas una idea, tu oferta es simple o el proyecto es temporal. El diseño web a medida compensa cuando la web participa en la venta, la reputación o el tipo de cliente que llega, [&#8230;]</p>
<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-a-medida-vs-plantilla/">diseño web a medida vs plantilla</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></description>
			<style id="elementor-post-28361">.elementor-28361 .elementor-element.elementor-element-b49f7a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}</style>							<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="28361" class="elementor elementor-28361" data-elementor-post-type="post">
				<div class="elementor-element elementor-element-b49f7a9 e-con-full e-flex e-con e-parent" data-id="b49f7a9" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-5b807be elementor-widget elementor-widget-html" data-id="5b807be" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!--
A-ESTUDIO · ARTÍCULO · DISEÑO WEB A MEDIDA O PLANTILLA · v3 (octubre 2026)
Widget HTML / Elementor Pro. Misma maqueta que /comparar-propuestas-diseno-web/ (aeArt1).
URL: https://a-estudio.co/diseno-web-a-medida-vs-plantilla/
RANK MATH · Focus keyword: diseño web a medida vs plantilla
Schema: este bloque emite FAQPage. BlogPosting y BreadcrumbList los emite Rank Math; la entidad A-ESTUDIO es global.
-->
<style id="ae-art1-styles">
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaLight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AE Art Silka';
  src:url('https://a-estudio.co/wp-content/uploads/2026/09/SilkaRegular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

#aeArt1{
  --paper:#F3EEE7;
  --paper2:#E9E3D8;
  --ink:#313131;
  --mu:#6A645A;
  --ln:rgba(49,49,49,.16);
  --ln2:rgba(49,49,49,.34);
  --rose:#FCB6E2;
  --olive:#615D36;
  --lime:#C8BD64;
  --serif:'Newsreader',Georgia,serif;
  --display:'Newsreader','Newsreader',Georgia,serif;
  --sans:'AE Art Silka','SILKA','Helvetica Neue',Arial,sans-serif;
  --mono:'AE Gh16 Silka',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(22px,5vw,88px);
  --max:1440px;
  --sticky-top:0px;
  --col-gap:clamp(24px,4vw,72px);

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font:300 18px/1.72 var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  text-align:left !important;
}

#aeArt1,
#aeArt1 *,
#aeArt1 *::before,
#aeArt1 *::after{
  box-sizing:border-box;
}

#aeArt1 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ol,ul,li,table){
  margin:0;
  padding:0;
}

#aeArt1 :where(ol,ul){
  list-style:none;
}

#aeArt1 img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

#aeArt1 [id]{
  scroll-margin-top:calc(34px + var(--sticky-top));
}

#aeArt1 ::selection{
  background:var(--rose);
  color:var(--ink);
}

/* =========================================================
   BLINDAJE ELEMENTOR · COLORES, TEXTOS, LINKS Y HOVERS
========================================================= */

html body #aeArt1#aeArt1,
html body #aeArt1#aeArt1 *{
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(
  h1,h2,h3,h4,h5,h6,
  p,span,li,dt,dd,figcaption,
  blockquote,em,strong,time,
  th,td,summary,button,label
){
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 :is(h1,h2,h3){
  font-family:var(--serif) !important;
  font-weight:300 !important;
  text-wrap:balance;
}

html body #aeArt1#aeArt1 p,
html body #aeArt1#aeArt1 li,
html body #aeArt1#aeArt1 td,
html body #aeArt1#aeArt1 dd{
  font-family:var(--sans) !important;
  font-weight:300 !important;
}

html body #aeArt1#aeArt1 em{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:300 !important;
  color:var(--acc,var(--olive)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 strong{
  font-weight:400 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-micro{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 a,
html body #aeArt1#aeArt1 a:link,
html body #aeArt1#aeArt1 a:visited,
html body #aeArt1#aeArt1 a:active{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

html body #aeArt1#aeArt1 a:hover,
html body #aeArt1#aeArt1 a:focus-visible{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-crumbs a,
html body #aeArt1#aeArt1 .art-crumbs a:link,
html body #aeArt1#aeArt1 .art-crumbs a:visited,
html body #aeArt1#aeArt1 .art-crumbs a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  border:0 !important;
}

html body #aeArt1#aeArt1 .art-crumbs a:hover,
html body #aeArt1#aeArt1 .art-crumbs a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-body a,
html body #aeArt1#aeArt1 .art-case a,
html body #aeArt1#aeArt1 .art-related a{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--lime) !important;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-body a:hover,
html body #aeArt1#aeArt1 .art-body a:focus-visible,
html body #aeArt1#aeArt1 .art-case a:hover,
html body #aeArt1#aeArt1 .art-case a:focus-visible,
html body #aeArt1#aeArt1 .art-related a:hover,
html body #aeArt1#aeArt1 .art-related a:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:rgba(200,189,100,.25) !important;
  border-color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-toc a,
html body #aeArt1#aeArt1 .art-toc a:link,
html body #aeArt1#aeArt1 .art-toc a:visited,
html body #aeArt1#aeArt1 .art-toc a:active{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ln) !important;
}

html body #aeArt1#aeArt1 .art-toc a:hover,
html body #aeArt1#aeArt1 .art-toc a:focus-visible,
html body #aeArt1#aeArt1 .art-toc a[aria-current="true"]{
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-author,
html body #aeArt1#aeArt1 .art-author:link,
html body #aeArt1#aeArt1 .art-author:visited,
html body #aeArt1#aeArt1 .art-author:hover,
html body #aeArt1#aeArt1 .art-author:focus-visible{
  font:300 24px/1.1 var(--display) !important;
  letter-spacing:-.015em !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 button,
html body #aeArt1#aeArt1 button span{
  color:var(--fg,var(--ink)) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Zonas oscuras */
html body #aeArt1#aeArt1 .art-close :is(h2,p,span,em,strong),
html body #aeArt1#aeArt1 .art-aside :is(p,span,em,strong,a){
  color:var(--fg,var(--paper)) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close p,
html body #aeArt1#aeArt1 .art-aside p{
  color:var(--mu) !important;
  -webkit-text-fill-color:currentColor !important;
}

html body #aeArt1#aeArt1 .art-close .art-micro{
  color:var(--rose) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Botón cierre: blindaje específico para evitar blanco sobre blanco */
html body #aeArt1#aeArt1 .art-close .art-btn,
html body #aeArt1#aeArt1 .art-close .art-btn:link,
html body #aeArt1#aeArt1 .art-close .art-btn:visited,
html body #aeArt1#aeArt1 .art-close .art-btn:active{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--paper) !important;
  border-color:var(--paper) !important;
  text-decoration:none !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn *,
html body #aeArt1#aeArt1 .art-close .art-btn span{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:var(--rose) !important;
  border-color:var(--rose) !important;
}

html body #aeArt1#aeArt1 .art-close .art-btn:hover *,
html body #aeArt1#aeArt1 .art-close .art-btn:focus-visible *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

#aeArt1 :focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

#aeArt1 .art-shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Progreso de lectura */
#aeArt1 .art-progress{
  position:fixed;
  left:0;
  right:0;
  top:var(--sticky-top);
  height:2px;
  z-index:60;
  pointer-events:none;
}

#aeArt1 .art-progress i{
  display:block;
  height:100%;
  background:var(--olive);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* Revelados */
#aeArt1 .art-line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

#aeArt1 .art-line>span{
  display:block;
}

#aeArt1.is-js .art-line>span{
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

#aeArt1.is-js .is-seen .art-line>span,
#aeArt1.is-in .art-title .art-line>span{
  transform:none;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(2)>span{
  --d:.08s;
}

#aeArt1.is-js :is(h1,h2) .art-line:nth-child(3)>span{
  --d:.16s;
}

#aeArt1.is-js [data-rv]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}

#aeArt1.is-js [data-rv].is-seen{
  opacity:1;
  transform:none;
}

#aeArt1.is-js .art-rise{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d);
}

#aeArt1.is-in .art-rise{
  opacity:1;
  transform:none;
}

#aeArt1 [data-clip] .art-img{
  overflow:hidden;
  background:var(--paper2);
}

#aeArt1.is-js [data-clip] .art-img{
  clip-path:inset(18% 18% 0 0);
  transition:clip-path 1.5s var(--ease);
}

#aeArt1.is-js [data-clip].is-seen .art-img{
  clip-path:inset(0);
}

/* Cabecera */
#aeArt1 .art-hero{
  padding:calc(36px + var(--sticky-top)) 0 clamp(40px,7vh,80px);
  background:var(--paper) !important;
}

#aeArt1 .art-crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ln);
  margin-bottom:clamp(40px,7vh,84px);
}

html body #aeArt1#aeArt1 .art-title{
  font-size:clamp(42px,5.6vw,98px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  max-width:22ch;
}

#aeArt1 .art-title .art-line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

#aeArt1 .art-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:28px var(--gut);
  align-items:end;
  margin-top:clamp(28px,5vh,56px);
}

html body #aeArt1#aeArt1 .art-dek{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.42 !important;
  max-width:44ch;
}

html body #aeArt1#aeArt1 .art-dek strong{
  font-weight:400 !important;
}

#aeArt1 .art-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-byline img{
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  flex:0 0 56px;
}

#aeArt1 .art-byline>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#aeArt1 .art-hero-fig{
  margin-top:clamp(36px,6vh,72px);
}

#aeArt1 .art-hero-fig .art-img{
  aspect-ratio:1900/1040;
}

#aeArt1 .art-hero-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
}

#aeArt1 figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:12px;
}

/* Longread e índice */
#aeArt1 .art-longread{
  position:relative;
  padding-block:clamp(56px,9vh,110px) 0;
  background:var(--paper) !important;
}

#aeArt1 .art-layout,
#aeArt1 .art-toc-layer,
#aeArt1 .art-case-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  gap:0 var(--col-gap);
}

#aeArt1 .art-toc-layer{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  padding-top:clamp(56px,9vh,110px);
}

#aeArt1 .art-toc{
  grid-column:1;
  position:sticky;
  top:calc(40px + var(--sticky-top));
  align-self:start;
  padding-top:6px;
  max-height:calc(100svh - var(--sticky-top) - 58px);
  overflow:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
}

#aeArt1 .art-toc ol{
  margin-top:14px;
  border-top:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-toc a{
  position:relative;
  display:block;
  padding:9px 0 9px 16px;
  font-size:14px !important;
  line-height:1.35 !important;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}

#aeArt1 .art-toc a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border:1px solid var(--ln2);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

html body #aeArt1#aeArt1 .art-toc a[aria-current="true"],
html body #aeArt1#aeArt1 .art-toc a:hover{
  padding-left:20px;
}

#aeArt1 .art-toc a[aria-current="true"]::before{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 .art-toc-space{
  grid-column:1;
  min-width:0;
}

#aeArt1 .art-body{
  grid-column:2;
  max-width:720px;
  min-width:0;
}

#aeArt1 .art-body section{
  padding-top:clamp(56px,9vh,96px);
}

#aeArt1 .art-body>section:first-of-type{
  padding-top:clamp(40px,6vh,64px);
}

#aeArt1 .art-layout--cont{
  padding-top:clamp(44px,7vh,80px);
  padding-bottom:clamp(72px,10vh,120px);
}

#aeArt1 .art-kicker{
  display:block;
  margin-bottom:14px;
}

html body #aeArt1#aeArt1 .art-body h2,
html body #aeArt1#aeArt1 .art-case h2,
html body #aeArt1#aeArt1 .art-close h2{
  font-size:clamp(34px,3.4vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  margin-bottom:26px;
}

#aeArt1 .art-body p{
  margin-bottom:18px;
  max-width:66ch;
}

#aeArt1 .art-drop::first-letter{
  float:left;
  font:300 5.4em/.8 var(--serif);
  margin:.08em .1em 0 0;
  color:var(--olive);
}

/* Tabla */
#aeArt1 .art-table{
  margin:34px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#aeArt1 .art-table table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

#aeArt1 .art-table th,
#aeArt1 .art-table td{
  text-align:left;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ln);
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
}

html body #aeArt1#aeArt1 .art-table thead th{
  font:300 22px/1.2 var(--serif) !important;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}

html body #aeArt1#aeArt1 .art-table thead th:last-child{
  color:var(--olive) !important;
  font-style:italic !important;
}

html body #aeArt1#aeArt1 .art-table tbody th{
  font:400 12px/1.6 var(--mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--mu) !important;
  padding-top:18px;
  width:22%;
}

#aeArt1 .art-table tbody td:last-child{
  background:linear-gradient(90deg,rgba(200,189,100,.16),transparent);
}

#aeArt1.is-js .art-table tbody tr{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

#aeArt1.is-js .art-table.is-seen tbody tr{
  opacity:1;
  transform:none;
}

/* Principios */
#aeArt1 .art-principles{
  margin-top:30px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-principles li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:0 18px;
  padding:26px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-num{
  font:300 54px/.9 var(--serif) !important;
  font-style:italic !important;
  color:var(--olive) !important;
}

html body #aeArt1#aeArt1 .art-principles h3{
  font-size:clamp(24px,2vw,30px) !important;
  line-height:1.15 !important;
  margin-bottom:10px;
  letter-spacing:-.015em !important;
}

#aeArt1 .art-principles p{
  margin:0;
  font-size:17px;
}

/* Caso */
#aeArt1 .art-case{
  grid-column:1/-1;
  width:100%;
  --acc:var(--olive);
  background:var(--paper2) !important;
  padding:clamp(72px,12vh,140px) 0;
  margin-top:clamp(64px,10vh,118px);
}

#aeArt1 .art-case-main{
  grid-column:2 / 4;
  min-width:0;
}

#aeArt1 .art-case-head{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px var(--gut);
  align-items:start;
}

#aeArt1 .art-case-head>.art-micro{
  grid-column:1/-1;
}

#aeArt1 .art-case-head h2{
  grid-column:1;
}

#aeArt1 .art-case-head>p{
  grid-column:2;
  grid-row:2;
  max-width:56ch;
}

#aeArt1 .art-facts{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 24px;
  margin-top:20px;
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-facts>div{
  padding:16px 0;
  border-bottom:1px solid var(--ln);
}

html body #aeArt1#aeArt1 .art-facts dd{
  font:300 clamp(20px,1.7vw,26px)/1.2 var(--serif) !important;
  margin-top:6px;
}

#aeArt1 .art-decisions{
  margin-top:clamp(48px,8vh,88px);
  border-top:1px solid var(--ink);
}

#aeArt1 .art-dec{
  display:grid;
  grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);
  gap:12px clamp(24px,3vw,56px);
  align-items:baseline;
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--ln2);
  position:relative;
}

#aeArt1 .art-dec::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--olive);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}

#aeArt1 .art-dec.is-seen::after{
  transform:scaleX(1);
  transition-delay:.3s;
}

html body #aeArt1#aeArt1 .art-dec-n{
  font:400 12px/1 var(--mono) !important;
  letter-spacing:.1em !important;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-spec{
  font:300 clamp(28px,3vw,50px)/1.06 var(--serif) !important;
  font-style:italic !important;
  letter-spacing:-.025em !important;
  color:var(--ink) !important;
  margin:0;
}

html body #aeArt1#aeArt1 .art-dec h3{
  font-size:21px !important;
  line-height:1.25 !important;
  margin-bottom:8px;
}

#aeArt1 .art-dec p:not(.art-spec){
  font-size:16px;
  margin:0;
}

#aeArt1 .art-pull{
  margin:clamp(64px,10vh,120px) auto 0;
  text-align:center;
  max-width:none;
}

html body #aeArt1#aeArt1 .art-pull p{
  font:300 clamp(44px,6vw,104px)/1 var(--display) !important;
  letter-spacing:-.03em !important;
}

#aeArt1 .art-pull span,
#aeArt1 .art-pull em{
  display:inline-block;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}

html body #aeArt1#aeArt1 .art-pull em{
  font-family:var(--display) !important;
  font-style:normal !important;
  color:var(--olive) !important;
}

#aeArt1.is-js .art-pull :is(span,em){
  opacity:0;
  transform:translate3d(0,.35em,0);
}

#aeArt1.is-js .art-pull.is-seen :is(span,em){
  opacity:1;
  transform:none;
}

#aeArt1 .art-case-foot{
  text-align:center;
  max-width:56ch;
  margin:28px auto 0;
}

/* Figuras, señales, listas */
#aeArt1 .art-fig{
  margin:6px 0 28px;
}

#aeArt1 .art-fig .art-img{
  aspect-ratio:4/5;
}

#aeArt1 .art-fig img{
  height:100%;
  object-fit:cover;
  object-position:center center;
  max-height:680px;
}

html body #aeArt1#aeArt1 .art-note{
  color:var(--mu) !important;
  font-size:15px !important;
}

#aeArt1 .art-checks{
  margin-top:14px;
  border-top:1px solid var(--ln2);
}

html body #aeArt1#aeArt1 .art-checks button{
  appearance:none;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:16px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:16px 0;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--ln) !important;
  border-radius:0 !important;
  text-align:left !important;
  cursor:pointer;
  font:300 19px/1.45 var(--serif) !important;
  transition:padding-left .5s var(--ease);
}

html body #aeArt1#aeArt1 .art-checks button:hover{
  padding-left:6px;
}

#aeArt1 .art-box{
  position:relative;
  width:18px;
  height:18px;
  margin-top:4px;
  border:1px solid var(--ln2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

#aeArt1 .art-box::after{
  content:'';
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid var(--paper);
  border-width:0 1px 1px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}

#aeArt1 button[aria-pressed="true"] .art-box{
  background:var(--olive);
  border-color:var(--olive);
}

#aeArt1 button[aria-pressed="true"] .art-box::after{
  transform:rotate(45deg) scale(1);
}

html body #aeArt1#aeArt1 button[aria-pressed="true"] span:last-child{
  font-style:italic !important;
}

#aeArt1 .art-result{
  margin-top:22px !important;
  padding:18px 20px;
  background:var(--paper2);
  border-left:2px solid var(--olive);
  transition:background .5s var(--ease);
}

#aeArt1 .art-result.is-active{
  background:rgba(200,189,100,.26);
}

#aeArt1 .art-list{
  border-top:1px solid var(--ln);
  margin:10px 0 18px;
}

#aeArt1 .art-list li{
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--ln);
  position:relative;
  font-size:17px;
}

#aeArt1 .art-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:25px;
  width:10px;
  height:1px;
  background:var(--olive);
}

#aeArt1 .art-list li a{
  margin-left:6px;
  font-size:14px;
}

#aeArt1 .art-aside{
  margin:30px 0;
  padding:24px 26px;
  background:var(--ink) !important;
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--lime);
}

#aeArt1 .art-aside p{
  margin:10px 0 0 !important;
}

/* FAQ */
#aeArt1 .art-faq{
  border-top:1px solid var(--ln2);
}

#aeArt1 .art-faq details{
  border-bottom:1px solid var(--ln);
}

#aeArt1 .art-faq summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:16px;
  align-items:center;
  min-height:56px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
}

#aeArt1 .art-faq summary::-webkit-details-marker{
  display:none;
}

html body #aeArt1#aeArt1 .art-faq h3{
  font-size:clamp(20px,1.6vw,24px) !important;
  line-height:1.25 !important;
  transition:transform .5s var(--ease);
}

#aeArt1 .art-faq summary:hover h3{
  transform:translate3d(6px,0,0);
}

html body #aeArt1#aeArt1 .art-faq details[open] h3{
  font-style:italic !important;
}

#aeArt1 .art-faq i{
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}

#aeArt1 .art-faq details[open] i{
  transform:rotate(45deg);
  background:var(--lime);
}

#aeArt1 .art-faq details>div{
  padding:0 0 22px;
}

html body #aeArt1#aeArt1 .art-faq details>div p{
  font-size:16px !important;
  color:var(--mu) !important;
}

#aeArt1 .art-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:40px !important;
  padding-top:20px;
  border-top:1px solid var(--ln);
}

#aeArt1 .art-related .art-micro{
  width:100%;
}

/* Cierre */
#aeArt1 .art-close{
  --fg:var(--paper);
  --mu:#BDB6AB;
  --acc:var(--rose);
  background:var(--ink) !important;
  padding:clamp(80px,13vh,150px) 0 clamp(64px,10vh,110px);
  text-align:center;
}

#aeArt1 .art-close .art-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
}

html body #aeArt1#aeArt1 .art-close h2{
  margin:22px 0;
}

html body #aeArt1#aeArt1 .art-close p{
  max-width:52ch;
  color:var(--mu) !important;
}

html body #aeArt1#aeArt1 .art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:34px;
  padding:18px 26px;
  min-height:60px;
  background:var(--paper) !important;
  border:1px solid var(--paper) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font:400 14px/1.2 var(--sans) !important;
  transition:background .5s var(--ease),border-color .5s var(--ease),gap .5s var(--ease);
}

#aeArt1 .art-btn-mark{
  position:relative;
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--ink) !important;
}

#aeArt1 .art-btn-mark::before{
  content:'';
  position:absolute;
  right:1px;
  top:8px;
  width:14px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:right center;
}

#aeArt1 .art-btn-mark::after{
  content:'';
  position:absolute;
  right:0;
  top:1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
  gap:52px;
}

/* Responsive */
@media(max-width:1100px){
  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  }

  #aeArt1 .art-case-main{
    grid-column:2;
  }
}

@media(max-width:900px){
  #aeArt1{
    --gut:clamp(20px,6vw,34px);
  }

  #aeArt1 .art-hero-grid,
  #aeArt1 .art-case-head{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-case-head>p{
    grid-column:auto;
    grid-row:auto;
  }

  #aeArt1 .art-longread{
    padding-block:32px 0;
  }

  #aeArt1 .art-layout,
  #aeArt1 .art-toc-layer,
  #aeArt1 .art-case-grid{
    display:block;
  }

  #aeArt1 .art-toc-layer{
    position:relative;
    inset:auto;
    z-index:1;
    padding-top:0;
    pointer-events:auto;
  }

  #aeArt1 .art-toc{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:8px;
    padding-bottom:20px;
  }

  #aeArt1 .art-toc ol{
    display:grid;
    grid-template-columns:1fr;
  }

  #aeArt1 .art-toc-space{
    display:none;
  }

  #aeArt1 .art-body{
    max-width:none;
  }

  #aeArt1 .art-body section{
    padding-top:clamp(52px,8vh,78px);
  }

  #aeArt1 .art-hero-fig .art-img{
    aspect-ratio:4/5;
  }

  #aeArt1 .art-hero-fig img{
    object-position:center center;
  }

  #aeArt1 .art-case{
    margin-top:56px;
    padding:clamp(64px,10vh,94px) 0;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr 1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:44px minmax(0,1fr);
  }

  #aeArt1 .art-dec>div{
    grid-column:2;
  }

  #aeArt1 figcaption{
    flex-direction:column;
    gap:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:44px minmax(0,1fr);
  }

  html body #aeArt1#aeArt1 .art-num{
    font-size:40px !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(42px,12vw,68px) !important;
  }

  #aeArt1 .art-table table{
    min-width:680px;
  }
}

@media(max-width:620px){
  #aeArt1 .art-byline{
    align-items:flex-start;
  }

  #aeArt1 .art-facts{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-dec>div,
  #aeArt1 .art-dec .art-spec{
    grid-column:1;
  }

  #aeArt1 .art-dec-n{
    margin-bottom:4px;
  }

  #aeArt1 .art-principles li{
    grid-template-columns:1fr;
  }

  #aeArt1 .art-principles .art-num{
    margin-bottom:10px;
  }

  #aeArt1 .art-drop::first-letter{
    float:none;
    font:inherit;
    margin:0;
    color:inherit;
  }

  html body #aeArt1#aeArt1 .art-checks button{
    font-size:18px !important;
  }

  html body #aeArt1#aeArt1 .art-btn{
    width:100%;
    gap:22px;
  }

  html body #aeArt1#aeArt1 .art-btn:is(:hover,:focus-visible){
    gap:28px;
  }
}

@media(max-width:420px){
  #aeArt1{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  html body #aeArt1#aeArt1 .art-title{
    font-size:clamp(39px,11.8vw,54px) !important;
    letter-spacing:-.032em !important;
  }

  html body #aeArt1#aeArt1 .art-body h2,
  html body #aeArt1#aeArt1 .art-case h2,
  html body #aeArt1#aeArt1 .art-close h2{
    font-size:clamp(31px,9vw,42px) !important;
  }

  #aeArt1 .art-hero{
    padding-top:calc(26px + var(--sticky-top));
  }

  #aeArt1 .art-case-head,
  #aeArt1 .art-decisions,
  #aeArt1 .art-pull{
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #aeArt1 *,
  #aeArt1 *::before,
  #aeArt1 *::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }

  #aeArt1 .art-line>span,
  #aeArt1 [data-rv],
  #aeArt1 .art-rise,
  #aeArt1 .art-table tbody tr,
  #aeArt1 .art-pull :is(span,em){
    opacity:1 !important;
    transform:none !important;
  }

  #aeArt1 [data-clip] .art-img{
    clip-path:none !important;
  }
}

@media print{
  #aeArt1 .art-progress,
  #aeArt1 .art-toc-layer{
    display:none;
  }

  #aeArt1 *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}
#aeArt1 .art-fig.art-fig--wide .art-img{aspect-ratio:16/10}
#aeArt1 .art-fig.art-fig--wide img{max-height:none}
#aeArt1 .art-body section > h3{margin:34px 0 10px}

/* Tabla de inversión: en móvil cada fila pasa a ficha, para que la columna de inversión no quede fuera de pantalla */
@media(max-width:620px){
html body #aeArt1#aeArt1 .art-table--stack{overflow:visible}
html body #aeArt1#aeArt1 .art-table--stack table{min-width:0 !important;width:100%}
html body #aeArt1#aeArt1 .art-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html body #aeArt1#aeArt1 .art-table--stack tbody tr{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--ln)}
html body #aeArt1#aeArt1 .art-table--stack tbody th,html body #aeArt1#aeArt1 .art-table--stack tbody td{display:block;width:auto;padding:0;border:0;background:none !important}
html body #aeArt1#aeArt1 .art-table--stack tbody td:last-child{background:linear-gradient(90deg,rgba(200,189,100,.16),transparent) !important}
html body #aeArt1#aeArt1 .art-table--stack tbody td:last-child{margin-top:6px;padding:10px 12px;font:italic 300 19px/1.35 var(--serif) !important}
html body #aeArt1#aeArt1 .art-table--stack tbody td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;font:400 11px/1.5 var(--mono);font-style:normal;letter-spacing:.11em;text-transform:uppercase;color:var(--mu)}
}
</style>
<div id="aeArt1" class="art" data-ae-art1 lang="es">
<div class="art-progress" aria-hidden="true"><i data-progress></i></div>
<header class="art-hero">
<div class="art-shell">
<nav class="art-crumbs art-micro" aria-label="Ruta">
<a href="https://a-estudio.co/">A-ESTUDIO</a>
<span aria-hidden="true">/</span>
<a href="https://a-estudio.co/blog-a-estudio/">Ideas</a>
<span aria-hidden="true">/</span>
<span>Diseño web</span>
</nav>
<h1 class="art-title">
<span class="art-line"><span>Diseño web a medida</span></span>
<span class="art-line"><span><em>o plantilla: qué necesita</em></span></span>
<span class="art-line"><span><em>realmente tu marca.</em></span></span>
</h1>
<div class="art-hero-grid">
<p class="art-dek art-rise" style="--d:.45s"><strong>Una plantilla basta cuando validas una idea, tu oferta es simple o el proyecto es temporal. El diseño web a medida compensa cuando la web participa en la venta, la reputación o el tipo de cliente que llega, y la estructura de una plantilla ya no puede explicar el negocio que existe hoy.</strong> La pregunta no es si una plantilla puede verse bien. Es si puede sostener la posición que tu marca necesita ocupar.</p>
<div class="art-byline art-rise" style="--d:.6s">
<img fetchpriority="high" fetchpriority="high" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/09/AINHOA-VAZQUEZ-X-A-ESTUDIO-3-1.jpg" width="1080" height="1350" alt="Ainhoa Vázquez, fundadora y directora creativa de A-ESTUDIO" loading="eager" decoding="async">
<div>
<a class="art-author" href="https://a-estudio.co/ainhoa-vazquez/">Ainhoa Vázquez</a>
<span class="art-micro">Fundadora y directora creativa · A-ESTUDIO</span>
<span class="art-micro"><time datetime="2026-10-19">Actualizado · 19 octubre 2026</time> · 14 min de lectura</span>
</div>
</div>
</div>
<figure class="art-hero-fig" data-clip>
<div class="art-img">
<img class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/10/dlezcano-2-ae.webp" width="1900" height="1040" loading="eager" decoding="async" alt="Web de DLezcano, marca de joyería y piercing, diseñada a medida por A-ESTUDIO" srcset="https://a-estudio.co/wp-content/uploads/2026/10/dlezcano-2-ae.webp 1900w, https://a-estudio.co/wp-content/uploads/2026/10/dlezcano-2-ae-1536x841.webp 1536w, https://a-estudio.co/wp-content/uploads/2026/10/dlezcano-2-ae-1024x561.webp 1024w, https://a-estudio.co/wp-content/uploads/2026/10/dlezcano-2-ae-768x420.webp 768w" sizes="100vw" />
</div>
<figcaption class="art-micro">
<span>DLezcano</span>
<span>La estructura nace de la marca, no al revés.</span>
</figcaption>
</figure>
</div>
</header>
<main class="art-longread">
<div class="art-shell art-toc-layer">
<aside class="art-toc" aria-label="Índice del artículo">
<p class="art-micro">Índice</p>
<ol>
<li><a href="#plantilla">Qué es una plantilla</a></li>
<li><a href="#a-medida">Qué es diseño a medida</a></li>
<li><a href="#diferencias">Las diferencias que importan</a></li>
<li><a href="#cuando-basta">Cuándo basta una plantilla</a></li>
<li><a href="#senales">Señales para cambiar</a></li>
<li><a href="#seo">SEO y rendimiento</a></li>
<li><a href="#wordpress">WordPress y plantilla</a></li>
<li><a href="#coste">El coste real</a></li>
<li><a href="#elegir">Cómo elegir</a></li>
<li><a href="#preguntas">Preguntas frecuentes</a></li>
</ol>
</aside>
</div>
<div class="art-shell art-layout">
<div class="art-toc-space" aria-hidden="true"></div>
<article class="art-body">
<p class="art-drop" data-rv>No siempre hace falta una web a medida. Pero cuando una marca compite por autoridad, posicionamiento o conversión, una plantilla puede convertirse en un límite antes de que el negocio esté preparado. Antes de elegir conviene separar herramienta y estrategia: una plantilla es una estructura que ya existe; una web a medida parte del negocio, de su posición, su oferta y su forma de vender. Y WordPress no obliga a usar una plantilla: puede alojar una experiencia diseñada específicamente para la marca.</p>
<section id="plantilla" aria-labelledby="h-pla">
<span class="art-kicker art-micro">01</span>
<h2 id="h-pla">
<span class="art-line"><span>Qué es realmente</span></span>
<span class="art-line"><span><em>una plantilla web.</em></span></span>
</h2>
<p data-rv>Una plantilla no es sinónimo de mala web. Es una decisión de partida: la estructura visual y funcional ya existe antes de conocer el negocio.</p>
<p data-rv><strong>Una plantilla web es un sistema prediseñado que define gran parte de la composición:</strong> cabecera, tipografías, rejillas, tarjetas, páginas interiores, formularios y comportamientos. Puede personalizarse con colores, fotografías, textos y ciertos cambios de distribución, pero su lógica principal precede a la estrategia de la marca.</p>
<p data-rv>Su ventaja es evidente: reduce tiempo, coste inicial y decisiones. Para un proyecto pequeño, una validación de oferta, una web provisional o un negocio cuya experiencia digital no sea un factor competitivo, puede ser una solución sensata.</p>
<p data-rv>El problema aparece cuando se espera que esa misma estructura resuelva una marca compleja, una oferta de alto valor o una posición diferencial. En ese momento la plantilla deja de ser una herramienta y empieza a dictar qué puede contar el negocio, en qué orden y con qué nivel de singularidad.</p>
<aside class="art-aside" data-rv>
<span class="art-micro">Dos puntos de partida</span>
<p><strong>Con plantilla, la marca entra en una estructura.</strong> Se adapta el contenido a una composición ya definida: es rápida y previsible, pero el margen de dirección depende de lo que la plantilla permite. <em>A medida, la estructura nace de la marca:</em> la arquitectura, el contenido, el ritmo visual y el desarrollo se deciden después de entender el negocio.</p>
</aside>
</section>
<section id="a-medida" aria-labelledby="h-med">
<span class="art-kicker art-micro">02</span>
<h2 id="h-med">
<span class="art-line"><span>Qué significa de verdad</span></span>
<span class="art-line"><span><em>diseño web a medida.</em></span></span>
</h2>
<p data-rv>No significa dibujar cada píxel desde cero solo para poder decir que es exclusivo. Significa que las decisiones responden al proyecto y no a la comodidad del sistema.</p>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Empieza antes del diseño</h3><p>Al ordenar la oferta, leer al público, detectar objeciones, definir qué debe entenderse primero y decidir qué señales de confianza necesita cada momento del recorrido.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>Sigue con la arquitectura</h3><p>Páginas, jerarquías, enlaces, navegación, contenidos, llamadas a la acción y relaciones entre servicios. Solo entonces el lenguaje visual convierte esa estrategia en experiencia: tipografía, composición, imagen, movimiento, contraste y ritmo.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Termina en un desarrollo estable</h3><p>El desarrollo traduce esa dirección a un sistema que funciona. Puede integrarse en WordPress para conservar la autonomía de edición, sin obligar a que la marca se parezca a un tema prediseñado.</p></div></li>
</ol>
<p data-rv><strong>El diseño web a medida define arquitectura, contenido, lenguaje visual y desarrollo a partir del negocio,</strong> en lugar de adaptar el negocio a una estructura que ya existía. Lo exclusivo no está en que nadie haya usado antes esa animación. Está en que cada decisión pertenece al problema correcto.</p>
</section>
<section id="diferencias" aria-labelledby="h-dif">
<span class="art-kicker art-micro">03</span>
<h2 id="h-dif">
<span class="art-line"><span>Las diferencias que importan</span></span>
<span class="art-line"><span><em>más allá de la estética.</em></span></span>
</h2>
<p data-rv>La comparación no debería reducirse a «barato frente a caro» o «rápido frente a lento». La diferencia real aparece en la capacidad para dirigir la imagen de la marca, el contenido y el crecimiento.</p>
<div class="art-table art-table--stack" data-table role="region" aria-label="Diferencias entre una web con plantilla y una web a medida" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Aspecto</span></th>
<th scope="col">Plantilla</th>
<th scope="col">Diseño a medida</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Estrategia</th><td data-label="Plantilla">Se adapta la oferta al patrón disponible.</td><td data-label="Diseño a medida">La arquitectura nace de la posición, la oferta y el recorrido de decisión.</td></tr>
<tr><th scope="row">Diferenciación</th><td data-label="Plantilla">Personalización visual dentro de un lenguaje compartido.</td><td data-label="Diseño a medida">Sistema visual, editorial e interactivo construido para la marca.</td></tr>
<tr><th scope="row">Contenido</th><td data-label="Plantilla">Los textos rellenan espacios previstos.</td><td data-label="Diseño a medida">El contenido define el orden, la longitud y el tipo de sección.</td></tr>
<tr><th scope="row">Escalabilidad</th><td data-label="Plantilla">Crece bien mientras las nuevas necesidades encajan en el tema.</td><td data-label="Diseño a medida">Se prepara una lógica capaz de incorporar servicios, sedes, casos o idiomas.</td></tr>
<tr><th scope="row">Rendimiento</th><td data-label="Plantilla">Puede cargar funciones y estilos que el proyecto no utiliza.</td><td data-label="Diseño a medida">El desarrollo puede priorizar solo los recursos que la experiencia necesita.</td></tr>
<tr><th scope="row">Mantenimiento</th><td data-label="Plantilla">Depende del tema, sus actualizaciones y compatibilidades.</td><td data-label="Diseño a medida">Depende de una implementación documentada y una base técnica controlada.</td></tr>
</tbody>
</table>
</div>
</section>
<section id="cuando-basta" aria-labelledby="h-bas">
<span class="art-kicker art-micro">04</span>
<h2 id="h-bas">
<span class="art-line"><span>Cuándo una plantilla</span></span>
<span class="art-line"><span><em>sí puede ser suficiente.</em></span></span>
</h2>
<p data-rv>Elegir una plantilla no es un error cuando el alcance, el momento y las expectativas son coherentes con esa decisión.</p>
<ul class="art-list art-list--tight">
<li data-rv><strong>Validación inicial.</strong> La prioridad es comprobar una oferta o iniciar presencia sin convertir todavía la web en una inversión estratégica.</li>
<li data-rv><strong>Negocio sencillo.</strong> Una sola audiencia, pocos servicios y un recorrido corto que no necesita una arquitectura compleja.</li>
<li data-rv><strong>Proyecto temporal.</strong> Campañas, eventos o iniciativas con una vida limitada y necesidades funcionales muy concretas.</li>
<li data-rv><strong>Presupuesto protegido.</strong> La inversión debe concentrarse primero en producto, operaciones o captación, y la web todavía no es el principal filtro de confianza.</li>
</ul>
<p data-rv>Incluso en estos casos conviene cuidar cuatro mínimos: una jerarquía clara, contenido propio, experiencia móvil y una implementación que no impida migrar o evolucionar después. La plantilla debería ser una fase consciente, no una deuda que nadie se atreve a tocar.</p>
</section>
<section id="senales" aria-labelledby="h-sen" data-signals>
<span class="art-kicker art-micro">05</span>
<h2 id="h-sen">
<span class="art-line"><span>Señales de que tu marca</span></span>
<span class="art-line"><span><em>ya ha superado la plantilla.</em></span></span>
</h2>
<p data-rv>Muchas empresas no necesitan una nueva web porque la anterior sea fea. La necesitan porque la estructura ya no puede explicar el negocio que existe hoy.</p>
<p class="art-note" data-rv>Marca las que reconoces en tu web actual.</p>
<ol class="art-checks">
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span><strong>La oferta ha crecido.</strong> Servicios, sedes o públicos distintos compiten por espacio y la navegación es una acumulación de enlaces.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span><strong>El precio necesita contexto.</strong> La marca ofrece más valor del que la web consigue hacer visible y los usuarios comparan solo por precio.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span><strong>Todo parece intercambiable.</strong> La identidad cambia, pero la estructura y el lenguaje siguen pareciéndose a otras empresas del sector.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span><strong>El contenido no cabe.</strong> Los textos se acortan o se fuerzan para respetar un diseño que no se hizo para esa información.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span><strong>El móvil es una reducción.</strong> La versión móvil apila la de escritorio, pero no reorganiza prioridades ni facilita la decisión.</span></button></li>
<li><button type="button" aria-pressed="false"><span class="art-box" aria-hidden="true"></span><span><strong>Cada cambio rompe algo.</strong> Plugins, estilos globales y personalizaciones acumuladas convierten cualquier mejora en un riesgo técnico.</span></button></li>
</ol>
<p class="art-result" aria-live="polite" data-result>Si no reconoces ninguna, tu plantilla probablemente sigue cumpliendo. <strong>Si reconoces varias, la web ya marca el límite.</strong></p>
<h3 data-rv>La web como sistema de valor</h3>
<p data-rv>Antes de leer argumentos, el usuario ya ha interpretado orden, seguridad, nivel de detalle y capacidad profesional. Esa primera lectura influye en cuánto tiempo dedica a explorar, qué nivel de precio le parece coherente, cuánta confianza necesita antes de contactar y con quién compara la marca.</p>
<p data-rv>Una plantilla puede personalizarse con buenas fotografías y una identidad cuidada. Pero cuando la posición depende de una experiencia singular, la diferenciación no puede descansar solo en los recursos visuales: tiene que aparecer en la arquitectura, el ritmo, la navegación, la forma de presentar pruebas y el modo de pedir una acción. Una web premium no se define por usar negro, tipografías editoriales o animaciones, sino por presentar la marca a la altura de lo que ofrece. En sectores donde la confianza precede a la compra, como el <a href="https://a-estudio.co/clinicas/">diseño web para clínicas</a>, esa diferencia se nota en las consultas que llegan.</p>
</section>
<section id="seo" aria-labelledby="h-seo">
<span class="art-kicker art-micro">06</span>
<h2 id="h-seo">
<span class="art-line"><span>SEO y rendimiento:</span></span>
<span class="art-line"><span><em>la plantilla no decide por sí sola.</em></span></span>
</h2>
<p data-rv><strong>Google no clasifica una web por usar plantilla o desarrollo a medida.</strong> Lo que pesa es el contenido, la arquitectura, los enlaces rastreables y la experiencia real de página. Google recomienda enlaces HTML rastreables, una estructura lógica y textos de enlace que ayuden a entender la relación entre páginas, y contenido útil, fiable y pensado para las personas. Una web puede estar construida con plantilla o a medida y cumplir, o incumplir, estos principios.</p>
<p data-rv>La ventaja potencial del desarrollo a medida es el control: decidir qué recursos cargar, cómo ordenar el HTML, qué contenido permanece visible, cómo se enlazan las páginas y qué se prioriza en móvil. Ese control hay que usarlo bien; por sí solo no es una estrategia SEO. Y la experiencia de página es más amplia que una puntuación: los Core Web Vitals miden rendimiento y estabilidad, pero buenos resultados técnicos no garantizan las primeras posiciones.</p>
<h3 data-rv>Una base preparada para crecer</h3>
<ul class="art-list art-list--tight">
<li data-rv>Arquitectura coherente con servicios, sectores, ubicaciones e intención de búsqueda.</li>
<li data-rv>Enlaces internos rastreables, con textos descriptivos.</li>
<li data-rv>Contenido esencial en HTML, no oculto detrás de interacciones frágiles.</li>
<li data-rv>Imágenes optimizadas, prioridades de carga y experiencia móvil real.</li>
<li data-rv>Datos estructurados que representan información visible y verificable.</li>
</ul>
<p data-rv>La guía <a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">web preparada para Google y la IA</a> desarrolla esta parte con más profundidad.</p>
</section>
<section id="wordpress" aria-labelledby="h-wor">
<span class="art-kicker art-micro">07</span>
<h2 id="h-wor">
<span class="art-line"><span>WordPress no significa</span></span>
<span class="art-line"><span><em>trabajar con una plantilla.</em></span></span>
</h2>
<p data-rv>El gestor de contenidos y el nivel de personalización son decisiones distintas. WordPress puede usarse con un tema comprado y una personalización superficial, o como base de gestión para una experiencia diseñada específicamente, con componentes propios, HTML personalizado y una estructura editorial adaptada al negocio.</p>
<p data-rv>Esta combinación permite mantener una administración conocida y gestionar contenidos sin renunciar a una dirección visual propia. El resultado depende de la implementación: una web a medida debe seguir siendo mantenible, documentada y razonable para el equipo que la gestionará. En A-ESTUDIO trabajamos desde esa unión: diseño y desarrollo propio en HTML integrado en WordPress, para que la tecnología se adapte a la experiencia y no al contrario.</p>
<aside class="art-aside" data-rv>
<span class="art-micro">Una regla</span>
<p>Una web a medida no debería convertirte en rehén de quien la construyó. <em>Debería darte más control con una base mejor dirigida.</em></p>
</aside>
</section>
<section id="coste" aria-labelledby="h-cos">
<span class="art-kicker art-micro">08</span>
<h2 id="h-cos">
<span class="art-line"><span>El coste real no termina</span></span>
<span class="art-line"><span><em>el día del lanzamiento.</em></span></span>
</h2>
<p data-rv>Comparar presupuestos solo por la cifra inicial oculta el coste de rehacer, parchear, migrar y sostener una web que no acompaña al negocio.</p>
<ol class="art-principles">
<li data-rv><span class="art-num" aria-hidden="true">1</span><div><h3>Lo que pagas para publicar</h3><p>Diseño, desarrollo, contenidos, configuración, pruebas y puesta en marcha.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">2</span><div><h3>Lo que la web no consigue explicar</h3><p>Consultas poco cualificadas, comparación por precio, abandono y oportunidades que nunca llegan a conversación.</p></div></li>
<li data-rv><span class="art-num" aria-hidden="true">3</span><div><h3>Lo que cuesta crecer después</h3><p>Nuevos servicios, idiomas, sedes, integraciones, rediseños parciales y el mantenimiento de decisiones acumuladas.</p></div></li>
</ol>
<p data-rv>Una web a medida requiere más inversión porque incluye más lectura estratégica, más decisiones y más horas de diseño y desarrollo. <strong>En A-ESTUDIO un proyecto parte de 2.300 € para una marca de una sede y hasta seis páginas, y crece con el alcance hasta superar los 30.000 € en los proyectos extensos.</strong> No siempre está justificada. Sí lo está cuando la web participa directamente en la percepción de valor, la captación, la venta, la reputación o la expansión del negocio. El artículo <a href="https://a-estudio.co/cuanto-cuesta-una-pagina-web-en-2026/">cuánto cuesta una página web en 2026</a> desglosa los niveles con más detalle.</p>
</section>
<section id="elegir" aria-labelledby="h-ele">
<span class="art-kicker art-micro">09</span>
<h2 id="h-ele">
<span class="art-line"><span>Cómo elegir sin comprar</span></span>
<span class="art-line"><span><em>más web de la que necesitas.</em></span></span>
</h2>
<p data-rv>La decisión depende del papel que la web debe desempeñar durante los próximos años, no solo de cómo quieres verla el día del lanzamiento.</p>
<div class="art-table art-table--stack" data-table role="region" aria-label="Matriz rápida para elegir entre plantilla y diseño web a medida" tabindex="0">
<table>
<thead>
<tr>
<th scope="col"><span class="art-micro">Tu situación</span></th>
<th scope="col">Encaja mejor</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Validar una idea o una presencia temporal</th><td data-label="Encaja mejor">Plantilla</td></tr>
<tr><th scope="row">Oferta simple; la web influye poco en la compra</th><td data-label="Encaja mejor">Plantilla</td></tr>
<tr><th scope="row">Compites por autoridad, confianza o una imagen premium</th><td data-label="Encaja mejor">A medida</td></tr>
<tr><th scope="row">Varios servicios, sedes, públicos o recorridos</th><td data-label="Encaja mejor">A medida</td></tr>
<tr><th scope="row">Necesitas una arquitectura SEO y editorial que crezca</th><td data-label="Encaja mejor">A medida</td></tr>
<tr><th scope="row">La marca ya tiene valor, pero la web la hace parecer una opción más</th><td data-label="Encaja mejor">A medida</td></tr>
</tbody>
</table>
</div>
<p data-rv>Antes de contratar, pide que te expliquen qué parte del trabajo corresponde a estrategia, arquitectura, textos, diseño, desarrollo, SEO de base, pruebas y acompañamiento. Una propuesta sólida no debería esconder su método detrás de la palabra «personalizado». Lo desarrollamos en <a href="https://a-estudio.co/comparar-propuestas-diseno-web/">cómo comparar propuestas de diseño web</a>.</p>
<figure class="art-fig art-fig--wide" data-clip>
<div class="art-img">
<img loading="lazy" loading="lazy" class="skip-lazy no-lazy" data-no-lazy="1" src="https://a-estudio.co/wp-content/uploads/2026/05/FARRA-SUNBLAST-FESTIVAL-.jpg" width="1900" height="1040" decoding="async" alt="Web de Farra World, festivales en Tenerife, con venta de entradas, diseñada por A-ESTUDIO" srcset="https://a-estudio.co/wp-content/uploads/2026/05/FARRA-SUNBLAST-FESTIVAL-.jpg 1900w, https://a-estudio.co/wp-content/uploads/2026/05/FARRA-SUNBLAST-FESTIVAL--1536x841.jpg 1536w, https://a-estudio.co/wp-content/uploads/2026/05/FARRA-SUNBLAST-FESTIVAL--1024x561.jpg 1024w, https://a-estudio.co/wp-content/uploads/2026/05/FARRA-SUNBLAST-FESTIVAL--768x420.jpg 768w" sizes="auto, 100vw" />
</div>
<figcaption class="art-micro">
<span>Farra World</span>
<span>Eventos, venta de entradas y movimiento sin perder claridad.</span>
</figcaption>
</figure>
<h3 data-rv>Tres formas de llevar una marca a su web</h3>
<p data-rv>Una web a medida no adopta siempre la misma estética. La coherencia está en la dirección, no en repetir una fórmula visual. <a href="https://a-estudio.co/farra-world/">Farra World</a> necesitaba arquitectura para eventos, venta de entradas, contenido y movimiento sin perder claridad. <a href="https://a-estudio.co/quora-clinic-healthcare/">Quora Clinic</a>, una experiencia clínica que ordena tratamientos y construye autoridad antes de la primera consulta. <a href="https://a-estudio.co/dlezcano/">DLezcano</a>, una dirección editorial y un sistema visual para una marca que no podía presentarse como un estudio más. El resto está en las <a href="https://a-estudio.co/proyectos/">obras seleccionadas</a>.</p>
</section>
<section id="preguntas" aria-labelledby="h-faq">
<span class="art-kicker art-micro">10</span>
<h2 id="h-faq">
<span class="art-line"><span>Preguntas</span></span>
<span class="art-line"><span><em>frecuentes.</em></span></span>
</h2>
<div class="art-faq">
<details name="art-faq" open><summary><h3>¿Una web con plantilla puede posicionarse en Google?</h3><i aria-hidden="true"></i></summary><div><p>Sí. Google no clasifica una página por utilizar o no una plantilla. Importan la utilidad y calidad del contenido, la arquitectura, los enlaces, la rastreabilidad, la relevancia, la autoridad y la experiencia general. Una plantilla bien implementada puede posicionarse; una web a medida mal construida también puede fracasar.</p></div></details>
<details name="art-faq"><summary><h3>¿Diseño a medida significa programar todo desde cero?</h3><i aria-hidden="true"></i></summary><div><p>No necesariamente. Puede apoyarse en un gestor como WordPress, librerías fiables o componentes existentes. Lo importante es que la estrategia, la arquitectura y la experiencia no estén condicionadas por una plantilla genérica y que el desarrollo se adapte al proyecto.</p></div></details>
<details name="art-faq"><summary><h3>¿Una plantilla premium es lo mismo que una web premium?</h3><i aria-hidden="true"></i></summary><div><p>No. «Premium» puede describir el precio o la calidad visual de una plantilla. Una web premium necesita además dirección, contenido, arquitectura, coherencia de marca, desarrollo cuidado y una experiencia capaz de sostener una posición de mayor valor.</p></div></details>
<details name="art-faq"><summary><h3>¿Qué opción es más rápida de publicar?</h3><i aria-hidden="true"></i></summary><div><p>Normalmente una plantilla, porque reduce las decisiones de diseño y desarrollo. Una web a medida requiere investigación, arquitectura, contenido, dirección visual, implementación y pruebas: en A-ESTUDIO, entre seis semanas y tres meses. Ese tiempo debe traducirse en una base más útil, no en complejidad innecesaria.</p></div></details>
<details name="art-faq"><summary><h3>¿Puedo empezar con plantilla y pasar después a una web a medida?</h3><i aria-hidden="true"></i></summary><div><p>Sí. Conviene conservar dominio, analítica, contenidos valiosos, estructura de URLs y señales SEO cuando sea posible. El rediseño debe planificarse para no perder información, enlaces o páginas que ya generan tráfico.</p></div></details>
<details name="art-faq"><summary><h3>¿Elementor sirve para una web a medida?</h3><i aria-hidden="true"></i></summary><div><p>Puede formar parte de una solución a medida. Elementor permite integrar widgets HTML, componentes propios y secciones diseñadas específicamente. El resultado depende de cómo se utilice, del control de estilos y de la calidad de la implementación.</p></div></details>
<details name="art-faq"><summary><h3>¿Una web a medida es más difícil de mantener?</h3><i aria-hidden="true"></i></summary><div><p>No debería serlo si está bien documentada, usa una base técnica razonable y distingue las áreas editables de las estructurales. La complejidad aparece cuando se personaliza sin sistema, tanto en plantillas como en desarrollos propios.</p></div></details>
<details name="art-faq"><summary><h3>¿Cuándo compensa económicamente una web a medida?</h3><i aria-hidden="true"></i></summary><div><p>Cuando la web influye en ventas, reputación, captación, en cómo se percibe el precio, en la expansión o en la confianza. También cuando una estructura genérica obliga a invertir constantemente en parches sin resolver el problema de fondo.</p></div></details>
<details name="art-faq"><summary><h3>¿Cómo sé si una propuesta es realmente a medida?</h3><i aria-hidden="true"></i></summary><div><p>La propuesta debería explicar investigación, objetivos, arquitectura, contenido, diseño, desarrollo, pruebas y entregables. También qué decisiones se personalizan, qué herramientas se utilizarán y cómo se gestionará la web después del lanzamiento.</p></div></details>
</div>
<p class="art-related" data-rv>
<span class="art-micro">Fuentes</span>
<a href="https://developers.google.com/search/docs/fundamentals/creating-helpful-content?hl=es" rel="noopener" target="_blank">Google · Contenido útil y fiable</a>
<a href="https://developers.google.com/search/docs/crawling-indexing/links-crawlable" rel="noopener" target="_blank">Google · Enlaces rastreables</a>
<a href="https://developers.google.com/search/docs/appearance/page-experience?hl=es" rel="noopener" target="_blank">Google · Experiencia de página</a>
<a href="https://web.dev/articles/vitals?hl=es" rel="noopener" target="_blank">web.dev · Web Vitals</a>
</p>
<p class="art-related" data-rv>
<span class="art-micro">Seguir leyendo</span>
<a href="https://a-estudio.co/cuanto-cuesta-una-pagina-web-en-2026/">Cuánto cuesta una página web en 2026</a>
<a href="https://a-estudio.co/comparar-propuestas-diseno-web/">Cómo comparar propuestas de diseño web</a>
<a href="https://a-estudio.co/diseno-web-premium/">Diseño web premium a medida</a>
<a href="https://a-estudio.co/web-preparada-para-google-y-la-ia/">Web preparada para Google y la IA</a>
</p>
</section>
</article>
</div>
</main>
<section class="art-close" aria-labelledby="h-close">
<div class="art-shell">
<span class="art-micro">Una dirección detrás de cada proyecto</span>
<h2 id="h-close">
<span class="art-line"><span>Tu marca no necesita una web más grande.</span></span>
<span class="art-line"><span><em>Necesita una web más propia.</em></span></span>
</h2>
<p data-rv>Cuéntanos qué ha cambiado en tu negocio, qué ya no consigue explicar tu web y qué posición necesitas construir.</p>
<a class="art-btn" href="https://a-estudio.co/contacto/#formulario" data-rv>
<span>Cuéntanos tu proyecto</span>
<span class="art-btn-mark" aria-hidden="true"></span>
</a>
</div>
</section>
</div>

<script id="ae-art1-interactions">
(function(){
  'use strict';

  var SEL='[data-ae-art1]';
  var done=new WeakSet();

  function toArray(list){
    return Array.prototype.slice.call(list || []);
  }

  function mount(root){
    if(!root || done.has(root)) return;
    done.add(root);
    root.classList.add('is-js');

    var rm=window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {matches:false};
    var started=false;

    function start(){
      if(started) return;
      started=true;
      window.requestAnimationFrame(function(){
        root.classList.add('is-in');
      });
    }

    if(document.fonts && document.fonts.ready){
      document.fonts.ready.then(start).catch(start);
    }

    window.setTimeout(start,800);

    var revealEls=toArray(root.querySelectorAll('h2,[data-rv],[data-clip],[data-table],[data-pull]'));

    if('IntersectionObserver' in window){
      var io=new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-seen');
            io.unobserve(entry.target);
          }
        });
      },{
        threshold:.15,
        rootMargin:'0px 0px -6% 0px'
      });

      revealEls.forEach(function(el){
        io.observe(el);
      });
    }else{
      revealEls.forEach(function(el){
        el.classList.add('is-seen');
      });
    }

    var progress=root.querySelector('[data-progress]');
    var progressWrap=progress ? progress.parentNode : null;
    var links=toArray(root.querySelectorAll('.art-toc a[href^="#"]'));
    var sections=links.map(function(a){
      var id=a.getAttribute('href');
      try{
        return root.querySelector(id);
      }catch(err){
        return null;
      }
    });

    function stickyTop(){
      var n=parseFloat(window.getComputedStyle(root).getPropertyValue('--sticky-top'));
      return isNaN(n) ? 0 : n;
    }

    function setActiveToc(){
      if(!links.length) return;

      var offset=stickyTop() + Math.max(110, window.innerHeight * .28);
      var currentIndex=0;

      sections.forEach(function(section,index){
        if(!section) return;
        if(section.getBoundingClientRect().top <= offset){
          currentIndex=index;
        }
      });

      links.forEach(function(link,index){
        if(index===currentIndex){
          link.setAttribute('aria-current','true');
        }else{
          link.removeAttribute('aria-current');
        }
      });
    }

    function setProgress(){
      if(!progressWrap) return;

      var rect=root.getBoundingClientRect();
      var total=rect.height - window.innerHeight;
      var value=Math.max(0,Math.min(1,-rect.top / (total > 0 ? total : 1)));

      progressWrap.style.setProperty('--p',value.toFixed(4));
    }

    var raf=0;

    function paint(){
      raf=0;
      setProgress();
      setActiveToc();
    }

    function requestPaint(){
      if(!raf){
        raf=window.requestAnimationFrame(paint);
      }
    }

    window.addEventListener('scroll',requestPaint,{passive:true});
    window.addEventListener('resize',requestPaint,{passive:true});
    paint();

    var signals=root.querySelector('[data-signals]');

    if(signals){
      var buttons=toArray(signals.querySelectorAll('.art-checks button'));
      var result=signals.querySelector('[data-result]');
      var base=result ? result.innerHTML : '';

      buttons.forEach(function(button){
        button.addEventListener('click',function(){
          var pressed=button.getAttribute('aria-pressed') === 'true';
          button.setAttribute('aria-pressed',pressed ? 'false' : 'true');

          if(!result) return;

          var count=buttons.filter(function(item){
            return item.getAttribute('aria-pressed') === 'true';
          }).length;

          result.classList.toggle('is-active',count > 0);

          if(count === 0){
result.innerHTML=base;
}else if(count >= 3){
result.innerHTML='Reconoces '+count+' de '+buttons.length+'. <strong>Tu web ya no explica el negocio que tienes hoy.</strong>';
}else{
result.innerHTML='Reconoces '+count+' de '+buttons.length+'. Todavía puede bastar con ajustes, <strong>pero conviene vigilar cómo crece la oferta.</strong>';
}
        });
      });
    }

    links.forEach(function(link){
      link.addEventListener('click',function(event){
        var id=link.getAttribute('href');
        var target;

        try{
          target=root.querySelector(id);
        }catch(err){
          target=null;
        }

        if(!target) return;

        event.preventDefault();

        var top=target.getBoundingClientRect().top + window.pageYOffset - stickyTop() - 24;

        window.scrollTo({
          top:top,
          behavior:rm.matches ? 'auto' : 'smooth'
        });

        if(window.history && window.history.replaceState){
          window.history.replaceState(null,'',id);
        }

        setTimeout(paint,80);
      });
    });
  }

  function scan(){
    toArray(document.querySelectorAll(SEL)).forEach(mount);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded',scan);
  }else{
    scan();
  }

  if(window.jQuery){
    window.jQuery(window).on('elementor/frontend/init',function(){
      if(window.elementorFrontend && window.elementorFrontend.hooks){
        window.elementorFrontend.hooks.addAction('frontend/element_ready/html.default',scan);
      }
    });
  }
})();
</script>
<script type="application/ld+json" id="ae-art1-schema">
{
 "@context": "https://schema.org",
 "@graph": [
  {
   "@id": "https://a-estudio.co/diseno-web-a-medida-vs-plantilla/#richSnippet",
   "about": [
    {
     "@type": "Thing",
     "name": "Diseño web a medida"
    },
    {
     "@type": "Thing",
     "name": "Plantilla web"
    },
    {
     "@type": "Thing",
     "name": "WordPress"
    }
   ],
   "mentions": [
    {
     "@type": "CreativeWork",
     "name": "DLezcano · Diseño web",
     "url": "https://a-estudio.co/dlezcano/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    },
    {
     "@type": "CreativeWork",
     "name": "Farra World · Diseño web",
     "url": "https://a-estudio.co/farra-world/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    },
    {
     "@type": "CreativeWork",
     "name": "QUORA Clinic · Diseño web",
     "url": "https://a-estudio.co/quora-clinic-healthcare/",
     "creator": {
      "@id": "https://a-estudio.co/#organization"
     }
    }
   ],
   "citation": [
    {
     "@type": "WebPage",
     "name": "Google Search Central · Contenido útil, fiable y centrado en las personas",
     "url": "https://developers.google.com/search/docs/fundamentals/creating-helpful-content?hl=es"
    },
    {
     "@type": "WebPage",
     "name": "Google Search Central · Enlaces rastreables",
     "url": "https://developers.google.com/search/docs/crawling-indexing/links-crawlable"
    },
    {
     "@type": "WebPage",
     "name": "Google Search Central · Experiencia de página",
     "url": "https://developers.google.com/search/docs/appearance/page-experience?hl=es"
    },
    {
     "@type": "WebPage",
     "name": "web.dev · Web Vitals",
     "url": "https://web.dev/articles/vitals?hl=es"
    }
   ]
  },
  {
   "@type": "FAQPage",
   "@id": "https://a-estudio.co/diseno-web-a-medida-vs-plantilla/#faq",
   "inLanguage": "es",
   "mainEntity": [
    {
     "@type": "Question",
     "name": "¿Una web con plantilla puede posicionarse en Google?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. Google no clasifica una página por utilizar o no una plantilla. Importan la utilidad y calidad del contenido, la arquitectura, los enlaces, la rastreabilidad, la relevancia, la autoridad y la experiencia general. Una plantilla bien implementada puede posicionarse; una web a medida mal construida también puede fracasar."
     }
    },
    {
     "@type": "Question",
     "name": "¿Diseño a medida significa programar todo desde cero?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No necesariamente. Puede apoyarse en un gestor como WordPress, librerías fiables o componentes existentes. Lo importante es que la estrategia, la arquitectura y la experiencia no estén condicionadas por una plantilla genérica y que el desarrollo se adapte al proyecto."
     }
    },
    {
     "@type": "Question",
     "name": "¿Una plantilla premium es lo mismo que una web premium?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No. «Premium» puede describir el precio o la calidad visual de una plantilla. Una web premium necesita además dirección, contenido, arquitectura, coherencia de marca, desarrollo cuidado y una experiencia capaz de sostener una posición de mayor valor."
     }
    },
    {
     "@type": "Question",
     "name": "¿Qué opción es más rápida de publicar?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Normalmente una plantilla, porque reduce las decisiones de diseño y desarrollo. Una web a medida requiere investigación, arquitectura, contenido, dirección visual, implementación y pruebas: en A-ESTUDIO, entre seis semanas y tres meses. Ese tiempo debe traducirse en una base más útil, no en complejidad innecesaria."
     }
    },
    {
     "@type": "Question",
     "name": "¿Puedo empezar con plantilla y pasar después a una web a medida?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Sí. Conviene conservar dominio, analítica, contenidos valiosos, estructura de URLs y señales SEO cuando sea posible. El rediseño debe planificarse para no perder información, enlaces o páginas que ya generan tráfico."
     }
    },
    {
     "@type": "Question",
     "name": "¿Elementor sirve para una web a medida?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Puede formar parte de una solución a medida. Elementor permite integrar widgets HTML, componentes propios y secciones diseñadas específicamente. El resultado depende de cómo se utilice, del control de estilos y de la calidad de la implementación."
     }
    },
    {
     "@type": "Question",
     "name": "¿Una web a medida es más difícil de mantener?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "No debería serlo si está bien documentada, usa una base técnica razonable y distingue las áreas editables de las estructurales. La complejidad aparece cuando se personaliza sin sistema, tanto en plantillas como en desarrollos propios."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cuándo compensa económicamente una web a medida?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "Cuando la web influye en ventas, reputación, captación, en cómo se percibe el precio, en la expansión o en la confianza. También cuando una estructura genérica obliga a invertir constantemente en parches sin resolver el problema de fondo."
     }
    },
    {
     "@type": "Question",
     "name": "¿Cómo sé si una propuesta es realmente a medida?",
     "acceptedAnswer": {
      "@type": "Answer",
      "text": "La propuesta debería explicar investigación, objetivos, arquitectura, contenido, diseño, desarrollo, pruebas y entregables. También qué decisiones se personalizan, qué herramientas se utilizarán y cómo se gestionará la web después del lanzamiento."
     }
    }
   ]
  }
 ]
}
</script>
				</div>
				</div>
				</div>
				</div>
		<p>La entrada <a rel="nofollow" href="https://a-estudio.co/diseno-web-a-medida-vs-plantilla/">diseño web a medida vs plantilla</a> se publicó primero en <a rel="nofollow" href="https://a-estudio.co">A-Estudio by Ainhoa Vázquez | Diseño Web y Branding Premium</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
