*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    /* Paleta muestreada pixel a pixel de ATI_Logo_Color.png.
       Púrpura y teal son los valores exactos del logotipo, no aproximaciones. */
    --purpura: #561269;        /* wordmark "Ati" */
    --purpura-claro: #6E2384;  /* derivado, para hover */
    --purpura-oscuro: #2E0A3A; /* derivado, para degradados */
    --purpura-palido: #EDE2F1; /* derivado, para fondos */
    --teal: #177591;           /* descriptor "Trazos & Ecos" */
    --teal-claro: #2A93AE;     /* derivado */
    --ambar: #F4A819;          /* amarillo de la pluma */
    --magenta: #882688;        /* magenta de la pluma */
    --coral: #D8563F;          /* coral de la pluma, solo para avisos */
    --crema: #FAF7F2;
    --crema-2: #F2EDE4;
    --texto: #2E2230;
    --texto-medio: #6B5A6E;
    --texto-claro: #9B8A9E;
    --blanco: #FFFFFF;
  }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  body {
    font-family: 'Jost', sans-serif;
    background: var(--crema);
    color: var(--texto);
    overflow-x: hidden;
    line-height: 1.6;
  }

  img { display: block; max-width: 100%; height: auto; }

  .saltar {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--purpura); color: var(--blanco);
    padding: .8rem 1.4rem; text-decoration: none; font-size: .8rem;
  }
  .saltar:focus { left: 1rem; top: 1rem; }

  :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

  /* NAV */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 1.1rem 3rem;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(250,247,242,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(86,18,105,.09);
    transition: box-shadow .3s ease;
  }
  /* Logotipo. La pluma es el archivo real de marca, recortado de ATI_Logo_Color.png.
     El nombre va al lado como texto vivo: se lee a cualquier tamaño y no pesa. */
  .logo-pluma { width: auto; display: block; flex-shrink: 0; }
  /* ATI va centrado sobre "Trazos & Ecos", que es más ancho. */
  .logo-nombre { display: block; font: inherit; letter-spacing: inherit; text-align: center; }

  .nav-logo {
    display: flex; align-items: center; gap: .65rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem; font-weight: 600; letter-spacing: .04em;
    color: var(--purpura); text-decoration: none; line-height: 1;
  }
  .nav-logo .logo-pluma { height: 46px; }
  .nav-logo span {
    display: block; font-family: 'Jost', sans-serif;
    font-size: .6rem; font-weight: 400; letter-spacing: .22em;
    text-transform: uppercase; color: var(--teal); margin-top: .3rem;
  }
  .nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
  .nav-links a {
    text-decoration: none; font-size: .76rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--texto-medio); transition: color .2s;
  }
  .nav-links a:hover { color: var(--purpura); }
  .nav-cta {
    background: var(--purpura); color: var(--blanco) !important;
    padding: .65rem 1.5rem !important; font-size: .7rem !important;
    transition: background .2s !important;
  }
  .nav-cta:hover { background: var(--purpura-claro) !important; }
  .menu-btn {
    display: none; background: none; border: 1px solid rgba(86,18,105,.25);
    color: var(--purpura); padding: .5rem .8rem; font-family: 'Jost', sans-serif;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .nav-movil { display: none; }
  .nav-movil[data-abierto="true"] {
    display: block; position: fixed; top: 68px; left: 0; right: 0; z-index: 99;
    background: var(--crema); border-bottom: 1px solid rgba(86,18,105,.12);
    padding: 1rem 2rem 1.6rem;
  }
  .nav-movil ul { list-style: none; }
  .nav-movil a {
    display: block; padding: .8rem 0; text-decoration: none;
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto-medio); border-bottom: 1px solid rgba(86,18,105,.08);
  }

  /* BOTONES */
  .btn-primario, .btn-linea {
    display: inline-block; padding: 1rem 2.1rem;
    font-family: 'Jost', sans-serif; font-size: .76rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; transition: all .25s ease; border: 1px solid transparent;
  }
  .btn-primario { background: var(--purpura); color: var(--blanco); }
  .btn-primario:hover { background: var(--purpura-claro); }
  .btn-linea { background: transparent; color: var(--purpura); border-color: var(--purpura); }
  .btn-linea:hover { background: var(--purpura); color: var(--blanco); }

  /* HERO */
  .hero {
    min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
    padding-top: 68px; position: relative;
  }
  .hero-izq {
    display: flex; flex-direction: column; justify-content: center;
    padding: 5rem 4rem 5rem 6rem;
  }
  .etiqueta {
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 1.8rem;
    display: flex; align-items: center; gap: 1rem;
  }
  .etiqueta::before { content: ''; width: 38px; height: 1px; background: var(--teal); flex: none; }
  .hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 4.2vw, 4rem); font-weight: 300;
    line-height: 1.14; color: var(--purpura); margin-bottom: 1.6rem;
  }
  .hero h1 em { font-style: italic; font-weight: 400; }
  .hero-p {
    font-size: 1rem; font-weight: 300; line-height: 1.85;
    color: var(--texto-medio); max-width: 440px; margin-bottom: 1.4rem;
  }
  .hero-firma {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1rem; color: var(--purpura); margin-bottom: 2.6rem;
  }
  .hero-acciones { display: flex; gap: 1rem; flex-wrap: wrap; }
  .hero-der { position: relative; overflow: hidden; background: var(--crema-2); }
  .hero-der img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
  }

  /* FRANJA DE FRASES */
  .franja { background: var(--purpura); padding: 2.2rem 0; overflow: hidden; }
  .franja-inner { display: flex; gap: 3.5rem; white-space: nowrap; animation: marquesina 34s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .franja-inner { animation: none; padding-left: 2rem; } }
  .franja-inner span {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.15rem; color: rgba(255,255,255,.72); flex-shrink: 0;
  }
  .franja-inner span b { color: var(--blanco); font-style: normal; font-weight: 500; }
  .franja-inner i { color: rgba(255,255,255,.3); font-style: normal; flex-shrink: 0; }
  @keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* SECCIONES */
  section { padding: 6.5rem 6rem; }
  .titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.9rem, 2.9vw, 2.9rem); font-weight: 300;
    line-height: 1.22; color: var(--purpura); max-width: 620px;
  }
  .titulo em { font-style: italic; font-weight: 400; }
  .centrado { text-align: center; }
  .centrado .etiqueta { justify-content: center; }
  .centrado .etiqueta::before { display: none; }
  .centrado .titulo { margin: 0 auto; }
  .bajada {
    font-size: 1rem; font-weight: 300; line-height: 1.85;
    color: var(--texto-medio); max-width: 520px; margin-top: 1.4rem;
  }
  .centrado .bajada { margin-left: auto; margin-right: auto; }

  /* SIGNIFICADO */
  .significado { background: var(--crema-2); padding-top: 5rem; padding-bottom: 5rem; }
  .significado-caja {
    max-width: 720px; margin: 0 auto; text-align: center;
  }
  .significado-palabra {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 300; color: var(--purpura); line-height: 1; letter-spacing: .04em;
  }
  .significado-fonetica {
    font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--teal); margin-top: .8rem;
  }
  .significado-caja p {
    font-size: 1.05rem; font-weight: 300; line-height: 1.9;
    color: var(--texto-medio); margin-top: 1.8rem;
  }

  /* HISTORIA */
  .historia { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .historia-texto p {
    font-size: 1rem; font-weight: 300; line-height: 1.95;
    color: var(--texto-medio); margin-top: 1.6rem;
  }
  .historia-cita {
    background: var(--purpura-palido); padding: 3.2rem; position: relative;
  }
  .historia-cita p {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.18rem; line-height: 1.72; color: var(--purpura);
  }
  .historia-cita cite {
    display: block; margin-top: 1.4rem; font-family: 'Jost', sans-serif;
    font-style: normal; font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--teal);
  }

  /* RITUAL */
  .ritual { background: var(--crema-2); }
  .pasos {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 1040px; margin: 3.5rem auto 0; position: relative;
  }
  .pasos::before {
    content: ''; position: absolute; top: 2.4rem; left: 12.5%; right: 12.5%;
    height: 1px; background: rgba(86,18,105,.18);
  }
  .paso { padding: 0 1.6rem; text-align: center; }
  .paso-num {
    width: 4.8rem; height: 4.8rem; border: 1px solid var(--purpura);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.6rem; background: var(--crema-2); position: relative; z-index: 1;
    font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-style: italic;
    color: var(--purpura);
  }
  .paso h3 {
    font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
    font-weight: 500; color: var(--purpura); margin-bottom: .7rem;
  }
  .paso p { font-size: .86rem; font-weight: 300; line-height: 1.75; color: var(--texto-medio); }

  /* PAGINA EN BLANCO */
  .blanco-caja {
    max-width: 860px; margin: 4.5rem auto 0; background: var(--crema);
    border-left: 3px solid var(--teal); padding: 2.8rem 3rem; text-align: left;
  }
  .blanco-caja h3 {
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
    font-weight: 400; color: var(--purpura); margin-bottom: .9rem;
  }
  .blanco-caja p { font-size: .95rem; font-weight: 300; line-height: 1.85; color: var(--texto-medio); }
  .blanco-lista { list-style: none; margin-top: 1.4rem; display: grid; gap: .7rem; }
  .blanco-lista li {
    font-size: .9rem; font-weight: 300; color: var(--texto-medio);
    display: flex; gap: .7rem; align-items: flex-start;
  }
  .blanco-lista li::before { content: ''; width: 14px; height: 1px; background: var(--teal); flex: none; margin-top: .75rem; }

  /* CUADERNOS */
  .cuadernos-cab {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 2rem; margin-bottom: 3.2rem; flex-wrap: wrap;
  }
  .grid-cuadernos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .cuaderno { display: flex; flex-direction: column; }
  .cuaderno-img {
    background: var(--crema-2); overflow: hidden; margin-bottom: 1.3rem;
    aspect-ratio: 800 / 1120;
  }
  .cuaderno-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .cuaderno:hover .cuaderno-img img { transform: scale(1.035); }
  .cuaderno-sub {
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--teal); margin-bottom: .45rem;
  }
  .cuaderno h3 {
    font-family: 'Cormorant Garamond', serif; font-size: 1.35rem;
    font-weight: 500; color: var(--purpura); margin-bottom: .5rem;
  }
  .cuaderno p { font-size: .85rem; font-weight: 300; line-height: 1.7; color: var(--texto-medio); margin-bottom: 1rem; }
  .cuaderno-precio {
    font-family: 'Cormorant Garamond', serif; font-size: 1.3rem;
    color: var(--purpura); margin-bottom: 1rem; margin-top: auto;
  }
  /* Campo señuelo para robots de spam. Invisible para las personas y para
     los lectores de pantalla; si llega con algo, el envío se descarta. */
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

  /* El envío va dentro de los 150.000: se dice en cada sitio donde aparece el precio. */
  .precio-envio {
    display: block; font-family: 'Jost', sans-serif; font-size: .64rem;
    font-weight: 400; letter-spacing: .15em; text-transform: uppercase;
    color: var(--teal); margin-top: .4rem;
  }
  .btn-cuaderno {
    display: block; text-align: center; text-decoration: none;
    border: 1px solid var(--purpura); color: var(--purpura); padding: .75rem 1rem;
    font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
    transition: all .2s;
  }
  .btn-cuaderno:hover { background: var(--purpura); color: var(--blanco); }

  .ficha {
    max-width: 900px; margin: 3.5rem auto 0; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(86,18,105,.12);
    border: 1px solid rgba(86,18,105,.12);
  }
  .ficha div { background: var(--crema); padding: 1.5rem 1rem; text-align: center; }
  .ficha strong {
    display: block; font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem; font-weight: 500; color: var(--purpura); margin-bottom: .3rem;
  }
  .ficha span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-claro); }

  /* DOBLE PUERTA */
  .puertas { background: var(--purpura); color: var(--blanco); }
  .puertas .titulo { color: var(--blanco); }
  .puertas .etiqueta { color: var(--ambar); }
  .puertas .etiqueta::before { background: var(--ambar); }
  .grid-puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3.5rem; }
  .puerta { border-top: 1px solid rgba(255,255,255,.22); padding-top: 2rem; }
  .puerta h3 {
    font-family: 'Cormorant Garamond', serif; font-size: 1.6rem;
    font-weight: 400; color: var(--ambar); margin-bottom: 1rem;
  }
  .puerta p { font-size: .93rem; font-weight: 300; line-height: 1.85; color: rgba(255,255,255,.75); margin-bottom: 1.2rem; }
  .puerta ul { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.8rem; }
  .puerta li {
    font-size: .86rem; font-weight: 300; color: rgba(255,255,255,.7);
    display: flex; gap: .7rem; align-items: flex-start;
  }
  .puerta li::before { content: ''; width: 12px; height: 1px; background: var(--ambar); flex: none; margin-top: .7rem; }
  .btn-claro {
    display: inline-block; border: 1px solid rgba(255,255,255,.5); color: var(--blanco);
    padding: .9rem 1.9rem; text-decoration: none; font-size: .74rem;
    letter-spacing: .14em; text-transform: uppercase; transition: all .2s;
  }
  .btn-claro:hover { background: var(--blanco); color: var(--purpura); border-color: var(--blanco); }

  /* POR QUE ESCRIBIR */
  .grid-razones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; margin-top: 3.5rem; }
  .razon { border-top: 1px solid rgba(86,18,105,.18); padding-top: 1.8rem; }
  .razon h3 {
    font-family: 'Cormorant Garamond', serif; font-size: 1.35rem;
    font-weight: 500; color: var(--purpura); margin-bottom: .8rem;
  }
  .razon p { font-size: .93rem; font-weight: 300; line-height: 1.85; color: var(--texto-medio); }

  /* TESTIMONIOS */
  .testimonios { background: var(--crema-2); }
  .grid-testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 3.2rem; }
  /* Cuatro reseñas caben mejor en dos columnas: son largas y a tres se vuelven angostas. */
  .grid-testimonios.dos { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .testimonio {
    background: var(--crema); padding: 2.4rem; border: 1px solid rgba(86,18,105,.12);
    display: flex; flex-direction: column;
  }
  .testimonio p {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.08rem; line-height: 1.72; color: var(--texto-medio); flex: 1;
  }
  .testimonio cite {
    display: block; margin-top: 1.5rem; font-family: 'Jost', sans-serif;
    font-style: normal; font-size: .72rem; font-weight: 400; letter-spacing: .16em;
    text-transform: uppercase; color: var(--teal);
  }
  .testimonios-nota {
    max-width: 580px; margin: 2.8rem auto 0; text-align: center;
    font-size: .9rem; font-weight: 300; color: var(--texto-medio); line-height: 1.85;
  }
  .testimonios-nota a { color: var(--purpura); }

  /* BLOG */
  .blog-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
  .grid-blog { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
  .articulo { display: flex; flex-direction: column; }
  .articulo-franja { height: 5px; margin-bottom: 1.4rem; }
  .fr-1 { background: linear-gradient(90deg, var(--purpura), var(--magenta), var(--coral)); }
  .fr-2 { background: linear-gradient(90deg, var(--teal), var(--teal-claro)); }
  .fr-3 { background: linear-gradient(90deg, var(--ambar), var(--coral)); }
  .articulo-cat { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: .6rem; }
  .articulo h3 {
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 1.25rem; line-height: 1.35; color: var(--purpura); margin-bottom: .7rem;
  }
  .articulo:first-child h3 { font-size: 1.65rem; }
  .articulo p { font-size: .88rem; font-weight: 300; line-height: 1.8; color: var(--texto-medio); margin-bottom: 1rem; }
  .articulo-meta { font-size: .72rem; color: var(--texto-claro); letter-spacing: .06em; margin-top: auto; }

  /* PREGUNTAS */
  .preguntas { background: var(--purpura-palido); }
  .grid-preguntas {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    max-width: 960px; margin: 3.2rem auto 3rem; text-align: left;
  }
  .pregunta {
    background: var(--crema); padding: 2rem 1.8rem; border-left: 3px solid var(--purpura);
    transition: all .25s;
  }
  .pregunta:hover { border-left-color: var(--teal); transform: translateX(4px); }
  .pregunta-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .9rem; color: var(--texto-claro); margin-bottom: .6rem; }
  .pregunta p { font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; font-style: italic; line-height: 1.6; color: var(--purpura); }

  /* GUIA */
  .guia { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .guia-izq { background: linear-gradient(160deg, var(--purpura) 0%, var(--purpura-oscuro) 100%); padding: 5rem; display: flex; flex-direction: column; justify-content: center; }
  .guia-izq .etiqueta { color: var(--ambar); }
  .guia-izq .etiqueta::before { background: var(--ambar); }
  .guia-izq h2 {
    font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 300;
    color: var(--blanco); line-height: 1.25; margin-bottom: 1.2rem;
  }
  .guia-izq h2 em { font-style: italic; color: var(--ambar); }
  .guia-izq > p { font-size: .93rem; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.85; margin-bottom: 1.8rem; }
  .guia-lista { list-style: none; display: grid; gap: .7rem; }
  .guia-lista li { font-size: .86rem; font-weight: 300; color: rgba(255,255,255,.78); display: flex; gap: .7rem; align-items: flex-start; }
  .guia-lista li::before { content: ''; width: 12px; height: 1px; background: var(--ambar); flex: none; margin-top: .7rem; }
  .guia-der { background: var(--crema); padding: 5rem; display: flex; flex-direction: column; justify-content: center; }
  .guia-der h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--purpura); margin-bottom: .5rem; }
  .guia-der > p { font-size: .88rem; color: var(--texto-claro); margin-bottom: 2rem; line-height: 1.7; }
  .campo { margin-bottom: 1.3rem; display: grid; gap: .35rem; }
  .campo label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-medio); }
  .campo input {
    border: none; border-bottom: 1px solid rgba(86,18,105,.2); background: transparent;
    padding: .8rem 0; font-family: 'Jost', sans-serif; font-size: .95rem;
    font-weight: 300; color: var(--texto); outline: none; transition: border-color .2s;
  }
  .campo input:focus { border-bottom-color: var(--purpura); }
  .campo-error { font-size: .72rem; color: var(--coral); min-height: 1em; }
  .btn-form {
    width: 100%; background: var(--purpura); color: var(--blanco); border: none;
    padding: 1.05rem; font-family: 'Jost', sans-serif; font-size: .76rem;
    font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; margin-top: .6rem; transition: background .25s;
  }
  .btn-form:hover { background: var(--purpura-claro); }
  .nota { font-size: .72rem; color: var(--texto-claro); margin-top: .9rem; line-height: 1.6; }
  .estado { font-size: .82rem; margin-top: .9rem; min-height: 1.2em; }

  /* CIERRE */
  .cierre { background: var(--crema-2); text-align: center; padding: 7rem 6rem; }
  .cierre h2 {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    font-weight: 300; color: var(--purpura); max-width: 720px; margin: 0 auto 1.4rem; line-height: 1.24;
  }
  .cierre h2 em { font-style: italic; }
  .cierre p { font-size: 1rem; font-weight: 300; color: var(--texto-medio); max-width: 480px; margin: 0 auto 2.6rem; line-height: 1.85; }
  .cierre-acciones { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

  /* PIE */
  footer { background: var(--purpura); color: var(--blanco); padding: 4rem 6rem 2.2rem; }
  .pie-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3.5rem; padding-bottom: 2.8rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .pie-logo { display: flex; align-items: center; gap: .75rem; font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; letter-spacing: .04em; color: var(--blanco); line-height: 1; }
  .pie-logo .logo-pluma { height: 58px; }
  .pie-logo span {
    display: block; font-family: 'Jost', sans-serif; font-size: .62rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ambar); margin-top: .4rem;
  }
  .pie-grid > div > p { font-size: .85rem; font-weight: 300; color: rgba(255,255,255,.6); line-height: 1.8; margin-top: 1.1rem; max-width: 250px; }
  .pie-col h3 { font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); margin-bottom: 1.1rem; }
  .pie-col ul { list-style: none; display: grid; gap: .6rem; }
  .pie-col a { font-size: .84rem; font-weight: 300; color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
  .pie-col a:hover { color: var(--blanco); }
  .pie-legal { margin-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .pie-legal p, .pie-legal a { font-size: .72rem; color: rgba(255,255,255,.42); text-decoration: none; }

  /* APARICION */
  .aparece { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .aparece.visible { opacity: 1; transform: none; }
  .d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; } .d3 { transition-delay: .36s; }
  @media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; } }

  /* RESPONSIVE */
  @media (max-width: 1100px) {
    section { padding: 5rem 3rem; }
    .hero-izq { padding: 4rem 3rem; }
    .grid-cuadernos { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
    .grid-blog { grid-template-columns: 1fr; }
    .grid-preguntas { grid-template-columns: repeat(2, 1fr); }
    .pie-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  }
  @media (max-width: 820px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    .menu-btn { display: block; }
    .nav-logo { font-size: 1.35rem; gap: .5rem; }
    .nav-logo .logo-pluma { height: 38px; }
    .pie-logo { font-size: 1.6rem; }
    .pie-logo .logo-pluma { height: 48px; }
    section { padding: 4rem 1.5rem; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-izq { padding: 3.5rem 1.5rem 2.5rem; }
    .hero-der { height: 420px; order: -1; }
    .historia { grid-template-columns: 1fr; gap: 2.5rem; }
    .pasos { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
    .pasos::before { display: none; }
    .blanco-caja { padding: 2rem 1.6rem; }
    .grid-puertas { grid-template-columns: 1fr; gap: 2.5rem; }
    .grid-razones { grid-template-columns: 1fr; gap: 2.2rem; }
    .grid-testimonios, .grid-testimonios.dos { grid-template-columns: 1fr; }
    .grid-preguntas { grid-template-columns: 1fr; }
    .ficha { grid-template-columns: 1fr 1fr; }
    .guia { grid-template-columns: 1fr; }
    .guia-izq, .guia-der { padding: 3rem 1.5rem; }
    .cierre { padding: 4.5rem 1.5rem; }
    footer { padding: 3rem 1.5rem 2rem; }
    .pie-grid { grid-template-columns: 1fr; }
  }

  /* ═══════════ COMPONENTES DE PÁGINAS INTERNAS ═══════════ */

  .cabecera-pagina { padding: 9rem 6rem 3.5rem; }
  .migas { font-size: .74rem; color: var(--texto-claro); margin-bottom: 1.6rem; }
  .migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
  .migas li + li::before { content: "/"; margin-right: .45rem; color: rgba(86,18,105,.25); }
  .migas a { color: var(--texto-medio); text-decoration: none; }
  .migas a:hover { color: var(--purpura); }
  .cabecera-pagina h1 {
    font-family: "Cormorant Garamond", serif; font-weight: 300;
    font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.18; color: var(--purpura);
    max-width: 820px;
  }
  .cabecera-pagina h1 em { font-style: italic; font-weight: 400; }

  .ancho { width: min(100% - 3rem, 1200px); margin-inline: auto; }
  .angosto { width: min(100% - 3rem, 780px); margin-inline: auto; }
  .bloque { padding-block: 4rem; }

  /* Cuerpo de artículo */
  .cuerpo { max-width: 680px; }
  .cuerpo p {
    font-size: 1.06rem; font-weight: 300; line-height: 1.95;
    color: var(--texto); margin-bottom: 1.5rem;
  }
  .cuerpo h2 {
    font-family: "Cormorant Garamond", serif; font-size: 1.85rem; font-weight: 400;
    color: var(--purpura); margin: 3rem 0 1.2rem; line-height: 1.3;
  }
  .cuerpo h3 {
    font-family: "Cormorant Garamond", serif; font-size: 1.35rem; font-weight: 500;
    color: var(--purpura); margin: 2.2rem 0 .9rem;
  }
  .cuerpo ul, .cuerpo ol { margin: 0 0 1.5rem 1.2rem; }
  .cuerpo li { font-size: 1.02rem; font-weight: 300; line-height: 1.9; color: var(--texto); margin-bottom: .7rem; }
  .cuerpo li::marker { color: var(--teal); }
  .cuerpo blockquote {
    border-left: 2px solid var(--teal); padding-left: 1.6rem; margin: 2.2rem 0;
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: 1.25rem; line-height: 1.65; color: var(--purpura);
  }
  .cuerpo blockquote p { font-family: inherit; font-size: inherit; font-style: inherit; color: inherit; line-height: inherit; }
  .cuerpo blockquote p:last-child { margin-bottom: 0; }
  .cuerpo a { color: var(--purpura); text-underline-offset: .2em; }
  .cuerpo a:hover { color: var(--teal); }
  .destacado {
    background: var(--purpura-palido); padding: 2rem 2.2rem; margin: 2.5rem 0;
    border-left: 3px solid var(--purpura);
  }
  .destacado p { font-size: 1rem; }
  .destacado p:last-child { margin-bottom: 0; }

  .articulo-datos {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    font-size: .76rem; color: var(--texto-claro); letter-spacing: .05em; margin-top: 1.5rem;
  }
  .articulo-datos span + span::before { content: "·"; margin-right: .5rem; }
  .entradilla {
    font-family: "Cormorant Garamond", serif; font-size: 1.32rem; font-weight: 300;
    font-style: italic; line-height: 1.6; color: var(--texto-medio); max-width: 660px;
    margin-top: 1.6rem;
  }

  /* Notas internas para Ana dentro de las políticas. Se quedan en el código como
     recordatorio, pero NO se muestran: antes se veían publicadas, con el "Ana, antes
     de publicar" a la vista de cualquiera que entrara. */
  .procedencia { display: none; }
  .procedencia strong { color: var(--purpura); font-weight: 500; }

  .autora {
    display: flex; gap: 1.6rem; align-items: flex-start; background: var(--crema-2);
    padding: 2rem; margin: 3.5rem 0;
  }
  .autora-inicial {
    width: 62px; height: 62px; border-radius: 50%; flex: none;
    background: var(--purpura-palido); display: flex; align-items: center; justify-content: center;
    font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: var(--purpura);
  }
  .autora h3 { font-family: "Cormorant Garamond", serif; font-size: 1.25rem; font-weight: 500; color: var(--purpura); margin-bottom: .4rem; }
  .autora p { font-size: .88rem; font-weight: 300; line-height: 1.8; color: var(--texto-medio); }

  /* Blog */
  .blog-cols { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 4rem; align-items: start; }
  .lista-blog { display: grid; gap: 2.4rem; }
  .item-blog { padding-bottom: 2.2rem; border-bottom: 1px solid rgba(86,18,105,.13); }
  .item-blog:last-child { border-bottom: 0; }
  .item-blog h2 { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; font-weight: 500; line-height: 1.32; margin-bottom: .6rem; }
  .item-blog h2 a { color: var(--purpura); text-decoration: none; }
  .item-blog h2 a:hover { text-decoration: underline; text-decoration-color: var(--teal); }
  .item-blog p { font-size: .95rem; font-weight: 300; line-height: 1.85; color: var(--texto-medio); margin-bottom: .8rem; }
  .barra { display: grid; gap: 2.5rem; align-content: start; position: sticky; top: 6rem; }
  .barra h3 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; }
  .barra ul { list-style: none; display: grid; gap: .65rem; }
  .barra a { font-size: .88rem; font-weight: 300; color: var(--texto-medio); text-decoration: none; }
  .barra a:hover { color: var(--purpura); }
  .barra-caja { background: var(--purpura-palido); padding: 1.8rem; }
  .barra-caja p { font-size: .87rem; font-weight: 300; line-height: 1.75; color: var(--texto-medio); margin-bottom: 1.1rem; }

  .pilares { display: flex; flex-wrap: wrap; gap: .6rem; }
  .pildora {
    display: inline-block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .45rem .9rem; border: 1px solid rgba(86,18,105,.22); color: var(--texto-medio);
    text-decoration: none; transition: all .2s;
  }
  .pildora:hover, .pildora[aria-current="page"] { border-color: var(--purpura); color: var(--purpura); }

  /* Ficha de producto */
  .producto { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
  .producto-galeria { position: sticky; top: 6rem; }
  .precio-grande { font-family: "Cormorant Garamond", serif; font-size: 2rem; color: var(--purpura); margin: 1.4rem 0; }
  .lista-check { list-style: none; display: grid; gap: .9rem; margin: 2rem 0; }
  /* El guión va posicionado, no como elemento flex. Con flex, un <strong> al principio
     del texto se convertía en su propia columna y la frase se partía en dos bloques
     que se rompían por separado. */
  .lista-check li {
    font-size: .94rem; font-weight: 300; line-height: 1.75; color: var(--texto-medio);
    position: relative; padding-left: 1.65rem;
  }
  .lista-check li::before {
    content: ""; position: absolute; left: 0; top: .82rem;
    width: 14px; height: 1px; background: var(--teal);
  }
  .lista-check strong { color: var(--purpura); font-weight: 500; }

  /* Acordeón */
  .acordeon { border-top: 1px solid rgba(86,18,105,.14); }
  .acordeon details { border-bottom: 1px solid rgba(86,18,105,.14); }
  .acordeon summary {
    cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
    font-family: "Cormorant Garamond", serif; font-size: 1.2rem; color: var(--purpura);
    min-height: 48px; display: flex; align-items: center;
  }
  .acordeon summary::-webkit-details-marker { display: none; }
  .acordeon summary::after {
    content: "+"; position: absolute; right: .2rem; font-family: "Jost", sans-serif;
    font-size: 1.4rem; color: var(--teal);
  }
  .acordeon details[open] summary::after { content: "\2212"; }
  .acordeon .respuesta { padding-bottom: 1.5rem; }
  .acordeon .respuesta p { font-size: .96rem; font-weight: 300; line-height: 1.85; color: var(--texto-medio); }
  .acordeon .respuesta p + p { margin-top: .9rem; }

  /* Tabla */
  .tabla-envoltura { overflow-x: auto; margin: 2rem 0; }
  table.datos { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9rem; font-weight: 300; }
  table.datos th, table.datos td { padding: .95rem .7rem; text-align: left; border-bottom: 1px solid rgba(86,18,105,.13); }
  table.datos thead th { font-weight: 500; color: var(--purpura); letter-spacing: .05em; }
  table.datos td { color: var(--texto-medio); }
  table.datos tbody th { font-weight: 400; color: var(--purpura); }

  /* Formulario */
  .campo textarea {
    border: 1px solid rgba(86,18,105,.2); background: transparent; padding: .9rem;
    font-family: "Jost", sans-serif; font-size: .95rem; font-weight: 300;
    color: var(--texto); outline: none; resize: vertical;
  }
  .campo textarea:focus { border-color: var(--purpura); }
  .campo select {
    border: none; border-bottom: 1px solid rgba(86,18,105,.2); background: transparent;
    padding: .8rem 0; font-family: "Jost", sans-serif; font-size: .95rem;
    font-weight: 300; color: var(--texto); outline: none;
  }
  .consentimiento {
    display: flex; gap: .8rem; align-items: flex-start; font-size: .82rem;
    font-weight: 300; color: var(--texto-medio); line-height: 1.7; margin-top: .5rem;
  }
  .consentimiento input { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .3rem; }

  @media (max-width: 1100px) {
    .cabecera-pagina { padding: 8rem 3rem 3rem; }
    .blog-cols { grid-template-columns: 1fr; gap: 3rem; }
    .barra { position: static; }
    .producto { grid-template-columns: 1fr; gap: 2.5rem; }
    .producto-galeria { position: static; max-width: 400px; }
  }
  @media (max-width: 820px) {
    .cabecera-pagina { padding: 7rem 1.5rem 2.5rem; }
    .autora { flex-direction: column; gap: 1rem; }
    .cuerpo p, .cuerpo li { font-size: 1rem; }
  }

  /* Utilidades */
  .solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  @media print {
    nav, footer, .franja, .btn-primario, .btn-linea, .barra { display: none; }
    body { background: #fff; }
  }
  /* Interior del cuaderno */
  .rejilla-interior { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 3rem; }
  /* En el inicio van dos, porque la primera página es la foto grande de arriba. */
  .rejilla-dos { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-inline: auto; }
  .rejilla-interior figure { margin: 0; }
  .rejilla-interior img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .rejilla-interior figcaption { font-size: .89rem; font-weight: 300; color: var(--texto-medio); line-height: 1.78; margin-top: 1rem; }
  .rejilla-interior strong { color: var(--purpura); font-weight: 500; }
  @media (max-width: 820px) { .rejilla-interior { grid-template-columns: 1fr; gap: 2.5rem; } }