/* Letras, cinta y pie: /sitio.css. Los colores que solo se usan aquí, de la app (www/estilo.css): esta página no carga el CSS de la app. */
  :root {
    --hoja: #fff; --linea: #ccd6ce; --pasto-claro: #dbe7de; --arete-claro: #fdfbe0;
    --leche: var(--pasto); --rojo: #b3261e; --rojo-claro: #fbe5e2; --wa: #25d366; --wa-tinta: #06301a; --fb: #1877f2;
    color-scheme: light;
  }
  html { -webkit-tap-highlight-color: transparent; }
  body { background: var(--cal); color: var(--tinta); font: 1.125rem/1.45 var(--texto); }
  a { color: var(--leche); }
  [hidden] { display: none !important; }
  svg { width: 1.35em; height: 1.35em; flex: none; }

  .sitio-pie { padding-bottom: 120px; } /* Que la barra de abajo no lo tape */

  main { max-width: 640px; margin: 0 auto; padding: 0 16px calc(2.5rem + env(safe-area-inset-bottom)); }
  .portada { padding: 1.3rem .3rem .4rem; text-align: center; }
  .portada h1 { margin: 0 0 .4rem; font: 700 2.75rem/1 var(--titulo); text-transform: uppercase; color: var(--pasto); }
  .portada p { margin: 0; color: var(--suave); }

  .caja { margin: 14px 0 0; padding: 18px; border-radius: 16px; background: var(--hoja); box-shadow: 0 1px 3px rgba(23,36,28,.12); }
  .caja.falta { box-shadow: 0 0 0 3px var(--rojo); }
  .caja h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font: 700 1.875rem/1.05 var(--titulo); color: var(--pasto); }
  .caja h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
  .paso { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--pasto); color: #fff; font-size: 1rem; flex: none; }
  .ayuda { margin: 0 0 .8rem; color: var(--suave); font-size: 1rem; }
  .centro { text-align: center; }
  .grupo { margin: .6rem 0 .35rem; color: var(--suave); font-weight: 700; font-size: .95rem; }

  label, legend { font-weight: 700; font-size: 1rem; }
  .campo { display: block; margin: 0 0 1rem; }
  .campo input, .campo textarea, .dos input, .mas-abajo input, #edad-fecha input {
    display: block; width: 100%; margin-top: .3rem; min-height: 52px; padding: .55rem .8rem; border: 1.5px solid var(--linea); border-radius: 10px;
    background-color: var(--hoja); color: var(--tinta); font: inherit; font-weight: 400; -webkit-appearance: none; appearance: none; }
  #campo-meses-pren { display: block; margin-top: .8rem; }
  #video .btn { width: 100%; margin-bottom: .5rem; }
  .estado:empty { display: none; }
  .campo select, .dos select, .otro select { margin-top: .3rem; }
  textarea { min-height: 96px; resize: vertical; }
  input:focus, textarea:focus { border-color: var(--pasto); outline: 2px solid var(--pasto-claro); }
  fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
  legend { padding: 0; margin-bottom: .35rem; }
  .mas-abajo { display: block; margin-top: .7rem; }
  .dos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .dos > label { min-width: 0; }

  .opciones { display: flex; flex-wrap: wrap; gap: .45rem; }
  .opcion { position: relative; font-weight: 400; }
  .opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .opcion span { display: inline-flex; align-items: center; min-height: 50px; padding: .5rem 1rem; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--hoja); cursor: pointer; }
  .opcion input:checked + span { background: var(--pasto); border-color: var(--pasto); color: #fff; font-weight: 700; }
  .opcion input:focus-visible + span { outline: 3px solid var(--leche); outline-offset: 2px; }
  .segmentos { display: flex; padding: 4px; margin-bottom: .6rem; border-radius: 14px; background: #dde3de; }
  .segmentos label { flex: 1; position: relative; font-weight: 400; }
  .segmentos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .segmentos span { display: block; padding: .65rem .3rem; border-radius: 10px; text-align: center; font-size: .95rem; cursor: pointer; }
  .segmentos input:checked + span { background: var(--hoja); font-weight: 700; box-shadow: 0 1px 2px rgba(23,36,28,.18); }
  .casilla { display: flex; align-items: center; gap: .7rem; min-height: 52px; margin: 0 0 .6rem; font-weight: 400; cursor: pointer; }
  .casilla input { width: 26px; height: 26px; flex: none; accent-color: var(--pasto); }
  .con-signo { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
  .con-signo b { font-size: 1.3rem; color: var(--pasto); }
  .con-signo input { margin: 0 !important; font-size: 1.4rem !important; font-weight: 700 !important; }
  details summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--leche); cursor: pointer; }
  details[open] summary { margin-bottom: .3rem; }

  .btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 54px; padding: .55rem 1rem; border-radius: 14px;
    border: 1.5px solid var(--linea); background: var(--hoja); color: var(--tinta); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
  .btn:disabled { opacity: .45; }
  .btn:active { transform: translateY(1px); }
  .btn.grande { width: 100%; min-height: 60px; margin: .4rem 0; font-size: 1.1rem; }
  .btn.primario, .btn.verde { background: var(--pasto); border-color: var(--pasto); color: #fff; }
  .btn.peligro { color: var(--rojo); border-color: #e9bdb8; }
  .btn.wa { background: var(--wa); border-color: var(--wa); color: var(--wa-tinta); }
  .btn.fb { background: var(--fb); border-color: var(--fb); color: #fff; }
  .botones { display: grid; gap: .6rem; margin-top: .9rem; }

  .fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .4rem; }
  .fotos:empty { display: none; }
  .foto { position: relative; border-radius: 12px; overflow: hidden; background: #dde3de; }
  .foto .ver-foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
  .foto img { display: block; width: 100%; height: 0; padding-bottom: 100%; object-fit: cover; }
  @supports (aspect-ratio: 1) { .foto img { height: auto; padding: 0; aspect-ratio: 1; } }
  .foto.primera { grid-column: span 2; grid-row: span 2; }
  .foto .principal, .foto .poner-primera { position: absolute; left: 6px; bottom: 6px; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; pointer-events: none; }
  .foto .principal { background: var(--arete); color: var(--arete-tinta); }
  .foto .poner-primera { background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; }
  .foto .quitar, #logo-vista .quitar { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
  .foto .quitar svg, #logo-vista .quitar svg { width: 20px; height: 20px; }

  #video video { display: block; width: 100%; max-height: 60vh; border-radius: 12px; background: #000; }
  #video .ayuda { margin: .4rem 0 .5rem; }

  /* El logo de la finca: redondo, entero, con fondo blanco (como en la imagen). */
  .logo-campo { display: flex; align-items: center; gap: .9rem; margin: .6rem 0 .2rem; }
  .logo-campo .ayuda { margin: 0 0 .4rem; }
  #logo-vista { position: relative; flex: none; }
  #logo-vista img { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: contain; padding: 7px; background: #fff; border: 2px solid #dbe7de; box-shadow: 0 1px 4px rgba(23,36,28,.15); }
  #logo-vista .quitar { top: -8px; right: -8px; width: 32px; height: 32px; }
  #marco { position: relative; max-width: 420px; margin: 0 auto; }
  #lienzo { position: relative; display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 2px 10px rgba(23,36,28,.25); }
  /* El video corre en la ventana de la foto, debajo de la plantilla. */
  #ventana { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; border-radius: 12px 12px 0 0; background: #12301f; }
  #ventana[hidden] { display: none; }
  #previa-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: fill; }
  .video-hecho { margin: .8rem 0; padding: .8rem; border: 1px solid #c9d6cc; border-radius: 12px; background: #fff; text-align: center; }
  .video-hecho p { margin: 0 0 .5rem; }
  .video-hecho video { display: block; width: 100%; max-width: 320px; margin: 0 auto .6rem; border-radius: 10px; background: #12301f; }
  .video-hecho .btn { margin-top: .4rem; }
  .error { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 12px; background: var(--rojo-claro); color: var(--rojo); font-weight: 700; text-align: center; }
  .estado { min-height: 1.5em; margin: .6rem 0 0; text-align: center; font-weight: 700; color: var(--pasto); }

  .editando { text-align: center; }
  .editando h2 { justify-content: center; }
  .listo { text-align: center; }
  .listo h2 { justify-content: center; font-size: 1.35rem; }
  .enlace-caja { margin: .4rem 0 .2rem; padding: .7rem .8rem; border-radius: 12px; background: var(--cal); font-weight: 700; word-break: break-all; }
  .secreto { margin: 1.2rem 0 1rem; padding: 1rem; border-radius: 14px; background: var(--arete-claro); border: 1.5px solid var(--arete-borde); }
  .secreto p { margin: .3rem 0 .6rem; }
  .secreto .btn { width: 100%; }
  .secreto .enlace-caja { background: #fff; font-weight: 400; font-size: .9rem; }
  .mio { padding: .8rem 0; border-top: 1px solid var(--linea); text-align: center; }
  .mio:first-of-type { border-top: 0; }
  .mio > div:first-child { margin-bottom: .5rem; }
  .mio span { display: block; color: var(--suave); }

  /* ¿Cuántos animales son? con − y + grandes */
  .cantidad { margin-top: 1rem; }
  .cantidad > label { display: block; margin-bottom: .35rem; }
  .contador { display: flex; align-items: stretch; gap: .5rem; max-width: 260px; }
  .contador button { flex: none; width: 56px; min-height: 56px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--hoja); color: var(--pasto); font: 700 1.6rem/1 system-ui, sans-serif; cursor: pointer; }
  .contador button:active { background: var(--pasto-claro); }
  .contador input { flex: 1; min-width: 0; min-height: 56px; padding: .4rem; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--hoja); color: var(--tinta); font: inherit; font-size: 1.4rem; font-weight: 700; text-align: center; }
  .cantidad .ayuda { margin: .45rem 0 0; }
  .otra-cuenta { margin: -.4rem 0 .8rem; font-weight: 700; color: var(--pasto); }
  .en-lista { margin-top: 1rem; }
  .en-lista-ayuda { margin: -.3rem 0 0 calc(26px + .7rem); }
  /* El aviso de que un anuncio vence: arriba, centrado, con su botón. */
  .vence { background: var(--arete-claro); border: 1.5px solid var(--arete-borde); box-shadow: none; text-align: center; }
  .aviso-vence + .aviso-vence { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--arete-borde); }
  .aviso-vence p { margin: 0 0 .6rem; font-size: 1.1rem; }
  .aviso-vence .btn { width: 100%; }
  .conteos { margin: .6rem 0; padding: .7rem .8rem; border-radius: 12px; background: var(--pasto-claro); color: var(--pasto); font-weight: 700; }

  .legal { margin: 1.4rem .5rem 0; text-align: center; color: var(--suave); font-size: .95rem; }
  .invita { text-align: center; }
  .invita img { border-radius: 14px; }
  .invita h2 { justify-content: center; text-align: center; }
  .invita p { color: var(--suave); margin: .2rem 0 1rem; }

  /* ---------- Por pasos: una pregunta por pantalla ---------- */
  main { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  body[data-paso="listo"] main { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  /* Arriba: cuánto falta y la tarjeta chiquita, que se va llenando. */
  #arriba { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 15; margin: 0 -16px; padding: 10px 16px 6px; background: var(--cal); }
  .avance { display: flex; gap: 6px; }
  .avance span { flex: 1; height: 6px; border-radius: 3px; background: #cfd9d1; }
  .avance span.hecho { background: var(--pasto); }
  .avance span.ahora { background: linear-gradient(90deg, var(--pasto) 50%, #cfd9d1 50%); }
  .cuenta { margin: .35rem 0 0; color: var(--suave); font-size: .9rem; font-weight: 700; }
  .mini { display: flex; align-items: center; gap: .75rem; width: 100%; margin: 8px 0 0; padding: 8px; border: 0; border-radius: 14px; background: var(--hoja);
    box-shadow: 0 1px 3px rgba(23,36,28,.14); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
  .mini canvas { flex: none; width: 60px; height: 75px; border-radius: 8px; background: #dde3de; }
  .mini .tx { flex: 1; min-width: 0; }
  .mini b { display: block; color: var(--pasto); font-size: 1.1rem; line-height: 1.2; }
  .mini .t1 { display: block; font-weight: 700; font-size: 1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mini .t2 { display: -webkit-box; color: var(--suave); font-size: .86rem; line-height: 1.3; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mini .ver { flex: none; align-self: flex-start; color: var(--leche); font-size: .875rem; font-weight: 700; }
  .caja h2[tabindex]:focus { outline: none; }
  /* Los avisos de arriba: "Sus anuncios" en el inicio y al terminar; "vence" en el inicio y en Así queda; "Está cambiando" en Así queda. */
  body:not([data-paso="0"]):not([data-paso="listo"]) #mis, body:not([data-paso="0"]):not([data-paso="6"]) #vence, body:not([data-paso="6"]) #editando { display: none !important; }
  /* El inicio */
  .inicio .portada { padding-top: 1.1rem; }
  .pasos-inicio { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
  .pasos-inicio li { display: flex; align-items: center; gap: .8rem; padding: 12px 14px; border-radius: 14px; background: var(--hoja); box-shadow: 0 1px 3px rgba(23,36,28,.12); }
  .pasos-inicio b { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--pasto); color: #fff; }
  .pasos-inicio small { display: block; color: var(--suave); font-size: .92rem; }
  /* Botones de un toque */
  .atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
  .atajos:empty { display: none; }
  #sec-contacto .atajos, #x-nota .atajos, .ir-a { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .ficha { min-height: 54px; padding: .45rem .6rem; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--hoja); color: var(--tinta);
    font: inherit; font-size: 1.02rem; line-height: 1.2; text-align: center; cursor: pointer; }
  .ficha.si { background: var(--pasto); border-color: var(--pasto); color: #fff; font-weight: 700; }
  .ir-a { display: grid; gap: .5rem; }
  .ir-a .ficha { min-height: 48px; font-size: .95rem; }
  /* La raya va de sombra y no de borde: en un fieldset el legend se sienta encima del borde y la raya lo tacha. */
  .pregunta { margin: 0 0 .9rem; padding: 14px 0 0; border: 0; box-shadow: inset 0 1px 0 var(--linea); min-width: 0; }
  .pregunta:first-of-type { box-shadow: none; padding-top: 4px; }
  fieldset.pregunta > legend { float: left; width: 100%; }
  fieldset.pregunta > legend + * { clear: both; }
  .pregunta h3, .pregunta legend, #sec-contacto h3 { margin: 0 0 .5rem; padding: 0; font-size: 1.05rem; }
  #sec-contacto h3 { margin-top: .9rem; }
  #sec-contacto h3:first-child { margin-top: 0; }
  .otro { display: block; margin-top: .55rem; color: var(--suave); font-size: .92rem; }
  .otro input { display: block; width: 100%; margin-top: .25rem; min-height: 50px; padding: .5rem .8rem; border: 1.5px solid var(--linea); border-radius: 10px;
    background-color: var(--hoja); color: var(--tinta); font: inherit; font-size: 1.05rem; -webkit-appearance: none; appearance: none; }
  .otra-edad { margin-top: .4rem; }
  .otra-edad .segmentos { margin-top: .2rem; }
  /* Qué vende: botones grandes con una ayudita */
  .opciones.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .opcion.tipo span { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 62px; text-align: center; line-height: 1.2; }
  .opcion.tipo b { font-size: 1.05rem; }
  .opcion.tipo small { color: var(--suave); font-size: .875rem; }
  .opcion.tipo input:checked + span small { color: #cfe2d5; }
  .segmentos button { flex: 1; padding: .65rem .3rem; border: 0; border-radius: 10px; background: none; color: var(--tinta); font: inherit; font-size: .98rem; cursor: pointer; }
  .segmentos button.si { background: var(--hoja); font-weight: 700; box-shadow: 0 1px 2px rgba(23,36,28,.18); }
  .cantidad { margin: .3rem 0 .6rem; }
  /* Lo de la vez pasada */
  .recordado { padding: 14px; border-radius: 14px; background: var(--arete-claro); border: 1.5px solid var(--arete-borde); }
  .recordado p { margin: .15rem 0; }
  .recordado .dos { margin-top: .8rem; }
  /* Así queda: qué tan completo y lo opcional */
  .fuerza { margin: 1rem 0 .4rem; }
  .fuerza p { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; }
  .fuerza p span { color: var(--pasto); }
  .fuerza .linea { height: 10px; border-radius: 5px; background: #cfd9d1; overflow: hidden; }
  .fuerza .linea i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--pasto); transition: width .3s; }
  .extras { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .extra { display: flex; align-items: center; gap: .55rem; min-height: 62px; padding: .5rem .65rem; border: 1.5px solid var(--linea); border-radius: 14px;
    background: var(--hoja); color: var(--tinta); font: inherit; font-size: .98rem; line-height: 1.2; text-align: left; cursor: pointer; min-width: 0; }
  .extra svg { width: 26px; height: 26px; color: var(--pasto); }
  .extra > span { min-width: 0; }
  .extra small { display: block; color: var(--suave); font-size: .875rem; }
  .extra.hecho { border-color: var(--pasto); background: var(--pasto-claro); }
  .extra.hecho small { color: var(--pasto); font-weight: 700; }
  #vista-previa .legal { margin: 1.2rem 0 0; }
  /* La barra de abajo: Atrás y el botón grande */
  .pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 18px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(237,241,236,0), var(--cal) 24%); }
  .pie > div { display: flex; gap: .6rem; max-width: 608px; margin: 0 auto; }
  .pie .btn { min-height: 58px; }
  .pie #atras { flex: none; width: 58px; padding: 0; }
  .pie #sigue, .pie #pie-final, .pie #pie-final .btn { flex: 1; width: 100%; font-size: 1.1rem; }
  .pie #sigue:disabled { opacity: 1; background: #93a99a; border-color: #93a99a; }
  #pie-final { display: flex; }
  /* Las hojas que suben desde abajo (lo opcional) */
  .velo { position: fixed; inset: 0; z-index: 40; background: rgba(10,20,14,.45); }
  .hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-width: 640px; max-height: 86vh; margin: 0 auto; overflow: auto;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--cal); animation: sube .2s ease-out; }
  .hoja h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
  .hoja .cerrar-hoja { margin-top: 1rem; }
  .tarjeta-grande { position: fixed; left: 50%; top: 50%; z-index: 45; width: min(92vw, 420px); transform: translate(-50%, -50%); }
  .tarjeta-grande canvas { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
  .tarjeta-grande .btn { margin-top: .8rem; }
  body.con-hoja { overflow: hidden; }
  @keyframes sube { from { transform: translateY(40px); opacity: .5; } }
  @media (prefers-reduced-motion: reduce) { .hoja { animation: none; } .fuerza .linea i { transition: none; } }

  #aviso { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; width: max-content; max-width: calc(100% - 32px);
    padding: .75rem 1.1rem; border-radius: 12px; background: var(--tinta); color: #fff; text-align: center; font-weight: 700;
    transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s; }
  #aviso.ver { transform: translate(-50%, 0); opacity: 1; }